@kyralabs/m3e-css 1.4.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/NOTICE +20 -1
- package/README.md +5 -0
- package/dist/assist-chip.css +1 -1
- package/dist/checkbox.css +1 -0
- package/dist/chip-set.css +1 -0
- package/dist/chip.css +1 -0
- package/dist/filter-chip.css +1 -0
- package/dist/focus-ring.css +1 -1
- package/dist/index.css +1 -1
- package/dist/input-chip.css +1 -0
- package/dist/layout.css +1 -0
- package/dist/list.css +1 -0
- package/dist/navigation-bar.css +1 -1
- package/dist/navigation-drawer.css +1 -0
- package/dist/navigation-item.css +1 -1
- package/dist/navigation-rail.css +1 -1
- package/dist/navigation-suite.css +1 -0
- package/dist/radio-button.css +1 -0
- package/dist/short-navigation-bar.css +1 -1
- package/dist/slider.css +1 -0
- package/dist/state-layer.css +1 -1
- package/dist/suggestion-chip.css +1 -0
- package/dist/switch.css +1 -0
- package/dist/tabs.css +1 -0
- package/dist/text-field.css +1 -0
- package/dist/vertical-drag-handle.css +1 -0
- package/dist/wide-navigation-rail.css +1 -1
- package/package.json +2 -2
package/NOTICE
CHANGED
|
@@ -16,17 +16,36 @@ Copyright (C) The Android Open Source Project
|
|
|
16
16
|
Licensed under the Apache License, Version 2.0
|
|
17
17
|
|
|
18
18
|
--------------------------------------------------------------------------------
|
|
19
|
-
AndroidX Compose Animation (animation-core: spring simulation and duration estimate)
|
|
19
|
+
AndroidX Compose Animation (animation-core: spring simulation and duration estimate, exponential decay)
|
|
20
20
|
https://android.googlesource.com/platform/frameworks/support/+/19991f2c0858aadfcb442ce02b2c8e4743c96898/compose/animation/animation-core/
|
|
21
21
|
Copyright (C) The Android Open Source Project
|
|
22
22
|
Licensed under the Apache License, Version 2.0
|
|
23
23
|
|
|
24
|
+
--------------------------------------------------------------------------------
|
|
25
|
+
AndroidX Compose Foundation (anchoredDraggable: the settle target and decay / tween choice)
|
|
26
|
+
https://android.googlesource.com/platform/frameworks/support/+/19991f2c0858aadfcb442ce02b2c8e4743c96898/compose/foundation/foundation/
|
|
27
|
+
Copyright (C) The Android Open Source Project
|
|
28
|
+
Licensed under the Apache License, Version 2.0
|
|
29
|
+
|
|
24
30
|
--------------------------------------------------------------------------------
|
|
25
31
|
AndroidX Compose UI Graphics (Matrix: the subset MaterialShapes uses)
|
|
26
32
|
https://android.googlesource.com/platform/frameworks/support/+/19991f2c0858aadfcb442ce02b2c8e4743c96898/compose/ui/ui-graphics/
|
|
27
33
|
Copyright (C) The Android Open Source Project
|
|
28
34
|
Licensed under the Apache License, Version 2.0
|
|
29
35
|
|
|
36
|
+
--------------------------------------------------------------------------------
|
|
37
|
+
AndroidX Compose Material3 Adaptive (window size class sets, pane scaffold directive, navigation suite type)
|
|
38
|
+
https://android.googlesource.com/platform/frameworks/support/+/19991f2c0858aadfcb442ce02b2c8e4743c96898/compose/material3/adaptive/
|
|
39
|
+
https://android.googlesource.com/platform/frameworks/support/+/19991f2c0858aadfcb442ce02b2c8e4743c96898/compose/material3/material3-adaptive-navigation-suite/
|
|
40
|
+
Copyright (C) The Android Open Source Project
|
|
41
|
+
Licensed under the Apache License, Version 2.0
|
|
42
|
+
|
|
43
|
+
--------------------------------------------------------------------------------
|
|
44
|
+
AndroidX WindowManager (window-core 1.5.0: WindowSizeClass breakpoints)
|
|
45
|
+
https://android.googlesource.com/platform/frameworks/support/+/19991f2c0858aadfcb442ce02b2c8e4743c96898/window/window-core/
|
|
46
|
+
Copyright (C) The Android Open Source Project
|
|
47
|
+
Licensed under the Apache License, Version 2.0
|
|
48
|
+
|
|
30
49
|
--------------------------------------------------------------------------------
|
|
31
50
|
AndroidX graphics-shapes (androidx.graphics:graphics-shapes 1.0.1, sources jar)
|
|
32
51
|
https://dl.google.com/android/maven2/androidx/graphics/graphics-shapes/1.0.1/graphics-shapes-1.0.1-sources.jar
|
package/README.md
CHANGED
|
@@ -25,6 +25,11 @@ npm install @kyralabs/m3e-css @kyralabs/m3e-tokens
|
|
|
25
25
|
</button>
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
+
Canonical layouts (`layout.css`): `.m3e-layout` is a size container; inside it
|
|
29
|
+
`.m3e-pane-scaffold--list-detail` / `--supporting-pane` show one, two or three panes by its width
|
|
30
|
+
(m3.material.io's counts: three from 1600px; add `--compose` for Compose's, three from 1200px;
|
|
31
|
+
`data-destination` picks the single pane) and `.m3e-feed` is the feed grid.
|
|
32
|
+
|
|
28
33
|
Import a single component with `@kyralabs/m3e-css/<component>.css` (for example `button.css`).
|
|
29
34
|
Classes follow `.m3e-<component>`, `__<part>` and `--<modifier>`.
|
|
30
35
|
|
package/dist/assist-chip.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"@kyralabs/m3e-tokens/components/
|
|
1
|
+
@import"@kyralabs/m3e-tokens/components/chips.css";@import"@kyralabs/m3e-tokens/components/chips-defaults.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@import"@kyralabs/m3e-tokens/components/elevation-motion.css";@import"@kyralabs/m3e-tokens/components/assist-chip.css";@import"@kyralabs/m3e-tokens/components/assist-chip-defaults.css";@property --_m3e-chip-shape{syntax: "<length-percentage>"; inherits: false; initial-value: 0%;}@layer m3e.components{:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip){--_m3e-chip-outline: inset 0 0 0 var(--_m3e-chip-outline-width) var(--_m3e-chip-outline-color);--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-outgoing-duration-hovered);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-outgoing-easing);--m3e-comp-state-layer-color: var(--_m3e-chip-state-layer);display:inline-flex;align-items:center;box-sizing:border-box;min-block-size:var(--_m3e-chip-height);margin:0;padding-block:0;padding-inline:var(--_m3e-chip-padding-start) var(--_m3e-chip-padding-end);border:none;border-radius:var(--_m3e-chip-shape);background-color:var(--_m3e-chip-container);box-shadow:var(--_m3e-chip-shadow);color:var(--_m3e-chip-label);font-family:var(--_m3e-chip-font);font-size:var(--_m3e-chip-font-size);font-weight:var(--_m3e-chip-font-weight);line-height:var(--_m3e-chip-line-height);letter-spacing:var(--_m3e-chip-tracking);text-align:start;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--_m3e-chip-shadow-duration) var(--_m3e-chip-shadow-easing)}:is(.m3e-filter-chip--expressive,.m3e-input-chip--expressive){transition:box-shadow var(--_m3e-chip-shadow-duration) var(--_m3e-chip-shadow-easing),border-radius var(--m3e-comp-selectable-chip-shape-duration) var(--m3e-comp-selectable-chip-shape-easing)}:is(.m3e-filter-chip--expressive,.m3e-input-chip--expressive)[data-spring]{transition-property:box-shadow}.m3e-input-chip__cell{display:flex;flex:1 1 auto;align-items:center;align-self:stretch;min-inline-size:0}:is(.m3e-assist-chip__label,.m3e-filter-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label){flex:1 1 auto;padding-inline:var(--_m3e-chip-label-start) var(--_m3e-chip-label-end)}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip__cell,.m3e-suggestion-chip) .m3e-icon{--m3e-comp-icon-size: var(--_m3e-chip-icon-size);color:var(--_m3e-chip-leading)}:is(.m3e-assist-chip__label,.m3e-filter-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label)~.m3e-icon,:is(.m3e-assist-chip__label,.m3e-filter-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label)~* .m3e-icon{color:var(--_m3e-chip-trailing)}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip):after{content:"";position:absolute;inset-block:min(0%,calc((var(--_m3e-chip-height) - var(--m3e-comp-minimum-interactive-component-size)) / 2));inset-inline:min(0%,calc((100% - var(--m3e-comp-minimum-interactive-component-size)) / 2))}@media(hover:hover){:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip):hover{--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);box-shadow:var(--_m3e-chip-shadow-hovered)}}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):focus-visible,.m3e-filter-chip:has(>.m3e-filter-chip__input:focus-visible){--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);box-shadow:var(--_m3e-chip-shadow-focused)}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:active,[data-pressed]){--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);box-shadow:var(--_m3e-chip-shadow-pressed)}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip)[data-dragged]{--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);box-shadow:var(--_m3e-chip-shadow-dragged)}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]),.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled){background-color:var(--_m3e-chip-container-disabled);box-shadow:var(--_m3e-chip-shadow-disabled);color:var(--_m3e-chip-label-disabled);cursor:default;transition:none}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]) .m3e-icon,.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled) .m3e-icon{color:var(--_m3e-chip-leading-disabled)}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]) :is(.m3e-assist-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label)~* .m3e-icon,:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]) :is(.m3e-assist-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label)~.m3e-icon,.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled) .m3e-filter-chip__label~.m3e-icon{color:var(--_m3e-chip-trailing-disabled)}@media(forced-colors:active){:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip){border:var(--m3e-comp-chips-outline-width-unselected) solid ButtonText}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip__cell,.m3e-suggestion-chip) .m3e-icon{color:ButtonText}.m3e-filter-chip:has(>.m3e-filter-chip__input:checked),.m3e-input-chip[aria-selected=true]{border-color:Highlight;outline:var(--m3e-comp-chips-outline-width-unselected) solid Highlight}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]),:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]) .m3e-icon,.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled),.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled) .m3e-icon{border-color:GrayText;color:GrayText}}}@layer m3e.components{.m3e-assist-chip{--_m3e-chip-height: var(--m3e-comp-assist-chip-container-height);--_m3e-chip-padding-start: var(--m3e-comp-assist-chip-content-padding-horizontal);--_m3e-chip-padding-end: var(--m3e-comp-assist-chip-content-padding-horizontal);--_m3e-chip-label-start: var(--m3e-comp-assist-chip-horizontal-spacing);--_m3e-chip-label-end: var(--m3e-comp-assist-chip-horizontal-spacing);--_m3e-chip-shape: var(--m3e-comp-assist-chip-container-shape);--_m3e-chip-icon-size: var(--m3e-comp-assist-chip-icon-size);--_m3e-chip-font: var(--m3e-comp-assist-chip-label-text-font);--_m3e-chip-font-size: var(--m3e-comp-assist-chip-label-text-size);--_m3e-chip-font-weight: var(--m3e-comp-assist-chip-label-text-weight);--_m3e-chip-line-height: var(--m3e-comp-assist-chip-label-text-line-height);--_m3e-chip-tracking: var(--m3e-comp-assist-chip-label-text-tracking);--_m3e-chip-outline-width: var(--m3e-comp-assist-chip-flat-outline-width);--_m3e-chip-outline-color: var(--m3e-comp-assist-chip-flat-outline-color);--_m3e-chip-container: transparent;--_m3e-chip-shadow: var(--_m3e-chip-outline);--_m3e-chip-shadow-hovered: var(--_m3e-chip-outline);--_m3e-chip-shadow-focused: var(--_m3e-chip-outline);--_m3e-chip-shadow-pressed: var(--_m3e-chip-outline);--_m3e-chip-shadow-dragged: var(--m3e-comp-assist-chip-container-shadow-dragged), var(--_m3e-chip-outline);--_m3e-chip-shadow-disabled: inset 0 0 0 var(--m3e-comp-assist-chip-flat-outline-width) color-mix( in srgb, var(--m3e-comp-assist-chip-flat-outline-color-disabled) calc(var(--m3e-comp-assist-chip-flat-outline-opacity-disabled) * 100%), transparent );--_m3e-chip-container-disabled: transparent;--_m3e-chip-label: var(--m3e-comp-assist-chip-label-text-color);--_m3e-chip-state-layer: var(--m3e-comp-assist-chip-label-text-color);--_m3e-chip-leading: var(--m3e-comp-assist-chip-icon-color);--_m3e-chip-trailing: var(--m3e-comp-assist-chip-icon-color);--_m3e-chip-label-disabled: color-mix( in srgb, var(--m3e-comp-assist-chip-label-text-color-disabled) calc(var(--m3e-comp-assist-chip-label-text-opacity-disabled) * 100%), transparent );--_m3e-chip-leading-disabled: color-mix( in srgb, var(--m3e-comp-assist-chip-icon-color-disabled) calc(var(--m3e-comp-assist-chip-icon-opacity-disabled) * 100%), transparent );--_m3e-chip-trailing-disabled: var(--_m3e-chip-leading-disabled)}.m3e-assist-chip--elevated{--_m3e-chip-container: var(--m3e-comp-assist-chip-elevated-container-color);--_m3e-chip-shadow: var(--m3e-comp-assist-chip-elevated-container-shadow);--_m3e-chip-shadow-hovered: var(--m3e-comp-assist-chip-elevated-container-shadow-hover);--_m3e-chip-shadow-focused: var(--m3e-comp-assist-chip-elevated-container-shadow-focus);--_m3e-chip-shadow-pressed: var(--m3e-comp-assist-chip-elevated-container-shadow-pressed);--_m3e-chip-shadow-dragged: var(--m3e-comp-assist-chip-container-shadow-dragged);--_m3e-chip-shadow-disabled: var(--m3e-comp-assist-chip-elevated-container-shadow-disabled);--_m3e-chip-container-disabled: color-mix( in srgb, var(--m3e-comp-assist-chip-elevated-container-color-disabled) calc(var(--m3e-comp-assist-chip-elevated-container-opacity-disabled) * 100%), transparent )}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"@kyralabs/m3e-tokens/components/checkbox.css";@import"@kyralabs/m3e-tokens/components/checkbox-defaults.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@property --_m3e-checkbox-fraction{syntax: "<number>"; inherits: true; initial-value: 0;}@property --_m3e-checkbox-gravitation{syntax: "<number>"; inherits: true; initial-value: 0;}@property --_m3e-checkbox-length1{syntax: "<number>"; inherits: true; initial-value: 0;}@property --_m3e-checkbox-length2{syntax: "<number>"; inherits: true; initial-value: 0;}@property --_m3e-checkbox-drawn1{syntax: "<number>"; inherits: true; initial-value: 0;}@property --_m3e-checkbox-drawn2{syntax: "<number>"; inherits: true; initial-value: 0;}@layer m3e.components{.m3e-checkbox{--_m3e-checkbox-fix: var(--m3e-comp-checkbox-styling-fix);--_m3e-checkbox-size: calc( var(--m3e-comp-checkbox-box-size) + (var(--m3e-comp-checkbox-box-size-styling-fix) - var(--m3e-comp-checkbox-box-size)) * var(--_m3e-checkbox-fix) );--_m3e-checkbox-point-cross-y: calc( var(--m3e-comp-checkbox-check-cross-y) + ( var(--m3e-comp-checkbox-check-cross-y-styling-fix) - var(--m3e-comp-checkbox-check-cross-y) ) * var(--_m3e-checkbox-fix) );--_m3e-checkbox-point-left-x: calc( var(--m3e-comp-checkbox-check-left-x) + ( var(--m3e-comp-checkbox-check-left-x-styling-fix) - var(--m3e-comp-checkbox-check-left-x) ) * var(--_m3e-checkbox-fix) );--_m3e-checkbox-point-right-x: calc( var(--m3e-comp-checkbox-check-right-x) + ( var(--m3e-comp-checkbox-check-right-x-styling-fix) - var(--m3e-comp-checkbox-check-right-x) ) * var(--_m3e-checkbox-fix) );--_m3e-checkbox-mark-disabled: color-mix( in srgb, var(--m3e-comp-checkbox-checkmark-color-disabled-styling-fix) calc(var(--_m3e-checkbox-fix) * 100%), var(--m3e-comp-checkbox-checkmark-color-disabled) );position:relative;display:inline-flex;align-items:center;vertical-align:middle;cursor:pointer;-webkit-tap-highlight-color:transparent}.m3e-checkbox__input{appearance:none;position:relative;z-index:1;flex:none;box-sizing:border-box;inline-size:var(--m3e-comp-minimum-interactive-component-size);block-size:var(--m3e-comp-minimum-interactive-component-size);margin:0;padding:0;border:0;background:none;opacity:0;cursor:inherit;outline:none}.m3e-checkbox__box,.m3e-checkbox__state{position:absolute;inset-block:0;margin-block:auto;pointer-events:none}.m3e-checkbox__box{--_m3e-checkbox-fill: transparent;--_m3e-checkbox-outline: var(--m3e-comp-checkbox-border-color-unchecked);--_m3e-checkbox-mark-color: var(--m3e-comp-checkbox-checkmark-color);--_m3e-checkbox-mark-opacity: 0;--_m3e-checkbox-zero: calc(var(--m3e-comp-checkbox-snap-delay) * 0);--_m3e-checkbox-check-duration: var(--m3e-comp-checkbox-snap-delay);--_m3e-checkbox-check-easing: var(--m3e-comp-checkbox-snap-easing);--_m3e-checkbox-gravitation-duration: var(--m3e-comp-checkbox-snap-delay);--_m3e-checkbox-gravitation-easing: var(--m3e-comp-checkbox-snap-easing);--_m3e-checkbox-color-duration: var(--m3e-comp-checkbox-color-out-duration);--_m3e-checkbox-color-easing: var(--m3e-comp-checkbox-color-out-easing);--_m3e-checkbox-fill-duration: var(--_m3e-checkbox-color-duration);inset-inline-start:calc((var(--m3e-comp-minimum-interactive-component-size) - var(--_m3e-checkbox-size)) / 2);box-sizing:border-box;inline-size:var(--_m3e-checkbox-size);block-size:var(--_m3e-checkbox-size);border:var(--m3e-comp-checkbox-stroke-width) solid var(--_m3e-checkbox-outline);border-radius:var(--m3e-comp-checkbox-box-corner-radius);background-color:var(--_m3e-checkbox-fill);background-clip:padding-box;transition:background-color var(--_m3e-checkbox-fill-duration) var(--_m3e-checkbox-color-easing),border-color var(--_m3e-checkbox-fill-duration) var(--_m3e-checkbox-color-easing)}.m3e-checkbox__mark{position:absolute;inset:calc(var(--m3e-comp-checkbox-stroke-width) * -1);inline-size:var(--_m3e-checkbox-size);block-size:var(--_m3e-checkbox-size);overflow:visible;color:var(--_m3e-checkbox-mark-color);opacity:var(--_m3e-checkbox-mark-opacity);transition:opacity var(--_m3e-checkbox-color-duration) var(--_m3e-checkbox-color-easing),color var(--_m3e-checkbox-color-duration) var(--_m3e-checkbox-color-easing)}.m3e-checkbox__stroke{--_m3e-checkbox-fraction: 0;--_m3e-checkbox-gravitation: 0;--_m3e-checkbox-center: var(--m3e-comp-checkbox-check-gravitation-center);--_m3e-checkbox-cross-x: calc( var(--m3e-comp-checkbox-check-cross-x) + (var(--_m3e-checkbox-center) - var(--m3e-comp-checkbox-check-cross-x)) * var(--_m3e-checkbox-gravitation) );--_m3e-checkbox-cross-y: calc( var(--_m3e-checkbox-point-cross-y) + (var(--_m3e-checkbox-center) - var(--_m3e-checkbox-point-cross-y)) * var(--_m3e-checkbox-gravitation) );--_m3e-checkbox-left-y: calc( var(--m3e-comp-checkbox-check-left-y) + (var(--_m3e-checkbox-center) - var(--m3e-comp-checkbox-check-left-y)) * var(--_m3e-checkbox-gravitation) );--_m3e-checkbox-right-y: calc( var(--m3e-comp-checkbox-check-right-y) + (var(--_m3e-checkbox-center) - var(--m3e-comp-checkbox-check-right-y)) * var(--_m3e-checkbox-gravitation) );--_m3e-checkbox-dx1: calc(var(--_m3e-checkbox-cross-x) - var(--_m3e-checkbox-point-left-x));--_m3e-checkbox-dy1: calc(var(--_m3e-checkbox-cross-y) - var(--_m3e-checkbox-left-y));--_m3e-checkbox-dx2: calc(var(--_m3e-checkbox-point-right-x) - var(--_m3e-checkbox-cross-x));--_m3e-checkbox-dy2: calc(var(--_m3e-checkbox-right-y) - var(--_m3e-checkbox-cross-y));--_m3e-checkbox-length1: hypot(var(--_m3e-checkbox-dx1), var(--_m3e-checkbox-dy1));--_m3e-checkbox-length2: hypot(var(--_m3e-checkbox-dx2), var(--_m3e-checkbox-dy2));--_m3e-checkbox-drawn: calc( clamp(0, var(--_m3e-checkbox-fraction), 1) * (var(--_m3e-checkbox-length1) + var(--_m3e-checkbox-length2)) );--_m3e-checkbox-drawn1: min(var(--_m3e-checkbox-drawn), var(--_m3e-checkbox-length1));--_m3e-checkbox-drawn2: max(0, var(--_m3e-checkbox-drawn) - var(--_m3e-checkbox-length1));--_m3e-checkbox-segment: calc(var(--_m3e-checkbox-length1) * var(--_m3e-checkbox-size));--_m3e-checkbox-segment-drawn: calc(var(--_m3e-checkbox-drawn1) * var(--_m3e-checkbox-size));fill:none;stroke:currentcolor;stroke-width:var(--m3e-comp-checkbox-stroke-width);stroke-linecap:square;stroke-dasharray:var(--_m3e-checkbox-segment) var(--m3e-comp-minimum-interactive-component-size);stroke-dashoffset:calc(var(--_m3e-checkbox-segment) - var(--_m3e-checkbox-segment-drawn));opacity:round(up,var(--_m3e-checkbox-drawn1),1);transform:translate(calc(var(--_m3e-checkbox-point-left-x) * var(--_m3e-checkbox-size)),calc(var(--_m3e-checkbox-left-y) * var(--_m3e-checkbox-size))) rotate(atan2(var(--_m3e-checkbox-dy1),var(--_m3e-checkbox-dx1)));transform-origin:0 0;transition:--_m3e-checkbox-fraction var(--_m3e-checkbox-check-duration) var(--_m3e-checkbox-check-easing),--_m3e-checkbox-gravitation var(--_m3e-checkbox-gravitation-duration) var(--_m3e-checkbox-gravitation-easing),stroke-dashoffset var(--m3e-comp-checkbox-follow-duration),stroke-dasharray var(--m3e-comp-checkbox-follow-duration),transform var(--m3e-comp-checkbox-follow-duration),opacity var(--m3e-comp-checkbox-follow-duration)}.m3e-checkbox__stroke+.m3e-checkbox__stroke{--_m3e-checkbox-segment: calc(var(--_m3e-checkbox-length2) * var(--_m3e-checkbox-size));--_m3e-checkbox-segment-drawn: calc(var(--_m3e-checkbox-drawn2) * var(--_m3e-checkbox-size));opacity:round(up,var(--_m3e-checkbox-drawn2),1);transform:translate(calc(var(--_m3e-checkbox-cross-x) * var(--_m3e-checkbox-size)),calc(var(--_m3e-checkbox-cross-y) * var(--_m3e-checkbox-size))) rotate(atan2(var(--_m3e-checkbox-dy2),var(--_m3e-checkbox-dx2)))}.m3e-checkbox__input:is(:checked,:indeterminate)~.m3e-checkbox__box{--_m3e-checkbox-fill: var(--m3e-comp-checkbox-box-color-checked);--_m3e-checkbox-outline: var(--m3e-comp-checkbox-border-color-checked);--_m3e-checkbox-mark-opacity: 1;--_m3e-checkbox-check-duration: var(--m3e-comp-checkbox-check-duration);--_m3e-checkbox-check-easing: var(--m3e-comp-checkbox-check-easing);--_m3e-checkbox-gravitation-duration: var(--m3e-comp-checkbox-check-duration);--_m3e-checkbox-gravitation-easing: var(--m3e-comp-checkbox-check-easing);--_m3e-checkbox-color-duration: var(--m3e-comp-checkbox-color-in-duration);--_m3e-checkbox-color-easing: var(--m3e-comp-checkbox-color-in-easing);background-clip:border-box}.m3e-checkbox__input:is(:checked,:indeterminate)~.m3e-checkbox__box .m3e-checkbox__stroke{--_m3e-checkbox-fraction: 1}.m3e-checkbox__input:indeterminate~.m3e-checkbox__box .m3e-checkbox__stroke{--_m3e-checkbox-gravitation: 1}.m3e-checkbox__input[aria-invalid=true]~.m3e-checkbox__box{--_m3e-checkbox-outline: var(--m3e-comp-checkbox-outline-color-unselected-error)}.m3e-checkbox:has(>.m3e-checkbox__input:disabled){cursor:default}.m3e-checkbox__input:disabled~.m3e-checkbox__box{--_m3e-checkbox-fill-duration: var(--_m3e-checkbox-zero);--_m3e-checkbox-outline: color-mix( in srgb, var(--m3e-comp-checkbox-border-color-unchecked-disabled) calc(var(--m3e-comp-checkbox-border-opacity-unchecked-disabled) * 100%), transparent );--_m3e-checkbox-mark-color: var(--_m3e-checkbox-mark-disabled)}.m3e-checkbox__input[aria-invalid=true]:is(:checked,:indeterminate)~.m3e-checkbox__box{--_m3e-checkbox-fill: var(--m3e-comp-checkbox-container-color-selected-error);--_m3e-checkbox-outline: var(--m3e-comp-checkbox-container-color-selected-error);--_m3e-checkbox-mark-color: var(--m3e-comp-checkbox-icon-color-selected-error)}.m3e-checkbox__input:disabled:is(:checked,:indeterminate)~.m3e-checkbox__box{--_m3e-checkbox-fill: color-mix( in srgb, var(--m3e-comp-checkbox-box-color-checked-disabled) calc(var(--m3e-comp-checkbox-box-opacity-checked-disabled) * 100%), transparent );--_m3e-checkbox-outline: transparent;--_m3e-checkbox-mark-color: var(--_m3e-checkbox-mark-disabled)}.m3e-checkbox__state{--_m3e-checkbox-ripple-hover: color-mix( in srgb, var(--m3e-comp-checkbox-state-layer-color-unselected-hover) calc(var(--_m3e-checkbox-fix) * 100%), var(--m3e-comp-checkbox-state-layer-color) );--_m3e-checkbox-ripple-focus: color-mix( in srgb, var(--m3e-comp-checkbox-state-layer-color-unselected-focus) calc(var(--_m3e-checkbox-fix) * 100%), var(--m3e-comp-checkbox-state-layer-color) );--_m3e-checkbox-ripple-pressed: color-mix( in srgb, var(--m3e-comp-checkbox-state-layer-color-unselected-pressed) calc(var(--_m3e-checkbox-fix) * 100%), var(--m3e-comp-checkbox-state-layer-color) );--m3e-comp-state-layer-color: var(--_m3e-checkbox-ripple-hover);inset-inline-start:calc((var(--m3e-comp-minimum-interactive-component-size) - var(--m3e-comp-checkbox-state-layer-size)) / 2);inline-size:var(--m3e-comp-checkbox-state-layer-size);block-size:var(--m3e-comp-checkbox-state-layer-size);border-radius:var(--m3e-comp-checkbox-state-layer-shape)}.m3e-checkbox__input:focus-visible~.m3e-checkbox__state{--m3e-comp-state-layer-color: var(--_m3e-checkbox-ripple-focus)}:is(.m3e-checkbox:active .m3e-checkbox__state,.m3e-checkbox__state[data-pressed]){--m3e-comp-state-layer-color: var(--_m3e-checkbox-ripple-pressed)}.m3e-checkbox__input[aria-invalid=true]~.m3e-checkbox__state{--_m3e-checkbox-ripple-hover: color-mix( in srgb, var(--m3e-comp-checkbox-state-layer-color-error-hover) calc(var(--_m3e-checkbox-fix) * 100%), var(--m3e-comp-checkbox-state-layer-color) );--_m3e-checkbox-ripple-focus: color-mix( in srgb, var(--m3e-comp-checkbox-state-layer-color-error-focus) calc(var(--_m3e-checkbox-fix) * 100%), var(--m3e-comp-checkbox-state-layer-color) );--_m3e-checkbox-ripple-pressed: color-mix( in srgb, var(--m3e-comp-checkbox-state-layer-color-error-pressed) calc(var(--_m3e-checkbox-fix) * 100%), var(--m3e-comp-checkbox-state-layer-color) )}.m3e-checkbox__input:is(:checked,:indeterminate)~.m3e-checkbox__state{--_m3e-checkbox-ripple-hover: color-mix( in srgb, var(--m3e-comp-checkbox-state-layer-color-checked-styling-fix) calc(var(--_m3e-checkbox-fix) * 100%), var(--m3e-comp-checkbox-state-layer-color) );--_m3e-checkbox-ripple-focus: var(--_m3e-checkbox-ripple-hover);--_m3e-checkbox-ripple-pressed: var(--_m3e-checkbox-ripple-hover)}.m3e-checkbox__input[aria-invalid=true]:is(:checked,:indeterminate)~.m3e-checkbox__state{--_m3e-checkbox-ripple-hover: color-mix( in srgb, var(--m3e-comp-checkbox-container-color-selected-error) calc(var(--_m3e-checkbox-fix) * 100%), var(--m3e-comp-checkbox-state-layer-color) )}.m3e-checkbox__state:before{--_m3e-ripple-x: 50%;--_m3e-ripple-y: 50%;--_m3e-ripple-radius: calc(var(--m3e-comp-checkbox-state-layer-size) / 2)}.m3e-checkbox__label{margin-inline-start:var(--m3e-comp-checkbox-label-space);font-family:var(--m3e-comp-checkbox-label-text-font);font-size:var(--m3e-comp-checkbox-label-text-size);font-weight:var(--m3e-comp-checkbox-label-text-weight);line-height:var(--m3e-comp-checkbox-label-text-line-height);letter-spacing:var(--m3e-comp-checkbox-label-text-tracking)}.m3e-checkbox[data-from=unchecked]>.m3e-checkbox__input:indeterminate~.m3e-checkbox__box{--_m3e-checkbox-gravitation-duration: var(--_m3e-checkbox-zero)}@media(forced-colors:active){.m3e-checkbox{--m3e-comp-checkbox-border-color-unchecked: CanvasText;--m3e-comp-checkbox-box-color-checked: Highlight;--m3e-comp-checkbox-border-color-checked: Highlight;--m3e-comp-checkbox-checkmark-color: HighlightText;--m3e-comp-checkbox-outline-color-unselected-error: CanvasText;--m3e-comp-checkbox-container-color-selected-error: Highlight;--m3e-comp-checkbox-icon-color-selected-error: HighlightText;--m3e-comp-checkbox-border-color-unchecked-disabled: GrayText;--m3e-comp-checkbox-border-opacity-unchecked-disabled: 1;--m3e-comp-checkbox-box-color-checked-disabled: GrayText;--m3e-comp-checkbox-box-opacity-checked-disabled: 1;--m3e-comp-checkbox-checkmark-color-disabled: Canvas;--m3e-comp-checkbox-checkmark-color-disabled-styling-fix: Canvas}.m3e-checkbox__box,.m3e-checkbox__mark{forced-color-adjust:none}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"@kyralabs/m3e-tokens/components/chips.css";@import"@kyralabs/m3e-tokens/components/chips-defaults.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@layer m3e.components{.m3e-chip-set{--_m3e-chip-set-row-gap: calc( var(--m3e-comp-minimum-interactive-component-size) - var(--m3e-comp-chips-height) );display:flex;flex-wrap:wrap;align-items:center;gap:var(--_m3e-chip-set-row-gap) calc(var(--m3e-comp-chip-set-chip-padding-horizontal) + var(--m3e-comp-chip-set-chip-padding-horizontal));box-sizing:border-box;padding-block:calc(var(--_m3e-chip-set-row-gap) / 2);padding-inline:var(--m3e-comp-chip-set-chip-padding-horizontal)}.m3e-chip-set--single-line{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.m3e-chip-set--single-line>*{flex:none}}
|
package/dist/chip.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"@kyralabs/m3e-tokens/components/chips.css";@import"@kyralabs/m3e-tokens/components/chips-defaults.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@import"@kyralabs/m3e-tokens/components/elevation-motion.css";@property --_m3e-chip-shape{syntax: "<length-percentage>"; inherits: false; initial-value: 0%;}@layer m3e.components{:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip){--_m3e-chip-outline: inset 0 0 0 var(--_m3e-chip-outline-width) var(--_m3e-chip-outline-color);--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-outgoing-duration-hovered);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-outgoing-easing);--m3e-comp-state-layer-color: var(--_m3e-chip-state-layer);display:inline-flex;align-items:center;box-sizing:border-box;min-block-size:var(--_m3e-chip-height);margin:0;padding-block:0;padding-inline:var(--_m3e-chip-padding-start) var(--_m3e-chip-padding-end);border:none;border-radius:var(--_m3e-chip-shape);background-color:var(--_m3e-chip-container);box-shadow:var(--_m3e-chip-shadow);color:var(--_m3e-chip-label);font-family:var(--_m3e-chip-font);font-size:var(--_m3e-chip-font-size);font-weight:var(--_m3e-chip-font-weight);line-height:var(--_m3e-chip-line-height);letter-spacing:var(--_m3e-chip-tracking);text-align:start;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--_m3e-chip-shadow-duration) var(--_m3e-chip-shadow-easing)}:is(.m3e-filter-chip--expressive,.m3e-input-chip--expressive){transition:box-shadow var(--_m3e-chip-shadow-duration) var(--_m3e-chip-shadow-easing),border-radius var(--m3e-comp-selectable-chip-shape-duration) var(--m3e-comp-selectable-chip-shape-easing)}:is(.m3e-filter-chip--expressive,.m3e-input-chip--expressive)[data-spring]{transition-property:box-shadow}.m3e-input-chip__cell{display:flex;flex:1 1 auto;align-items:center;align-self:stretch;min-inline-size:0}:is(.m3e-assist-chip__label,.m3e-filter-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label){flex:1 1 auto;padding-inline:var(--_m3e-chip-label-start) var(--_m3e-chip-label-end)}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip__cell,.m3e-suggestion-chip) .m3e-icon{--m3e-comp-icon-size: var(--_m3e-chip-icon-size);color:var(--_m3e-chip-leading)}:is(.m3e-assist-chip__label,.m3e-filter-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label)~.m3e-icon,:is(.m3e-assist-chip__label,.m3e-filter-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label)~* .m3e-icon{color:var(--_m3e-chip-trailing)}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip):after{content:"";position:absolute;inset-block:min(0%,calc((var(--_m3e-chip-height) - var(--m3e-comp-minimum-interactive-component-size)) / 2));inset-inline:min(0%,calc((100% - var(--m3e-comp-minimum-interactive-component-size)) / 2))}@media(hover:hover){:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip):hover{--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);box-shadow:var(--_m3e-chip-shadow-hovered)}}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):focus-visible,.m3e-filter-chip:has(>.m3e-filter-chip__input:focus-visible){--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);box-shadow:var(--_m3e-chip-shadow-focused)}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:active,[data-pressed]){--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);box-shadow:var(--_m3e-chip-shadow-pressed)}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip)[data-dragged]{--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);box-shadow:var(--_m3e-chip-shadow-dragged)}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]),.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled){background-color:var(--_m3e-chip-container-disabled);box-shadow:var(--_m3e-chip-shadow-disabled);color:var(--_m3e-chip-label-disabled);cursor:default;transition:none}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]) .m3e-icon,.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled) .m3e-icon{color:var(--_m3e-chip-leading-disabled)}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]) :is(.m3e-assist-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label)~* .m3e-icon,:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]) :is(.m3e-assist-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label)~.m3e-icon,.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled) .m3e-filter-chip__label~.m3e-icon{color:var(--_m3e-chip-trailing-disabled)}@media(forced-colors:active){:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip){border:var(--m3e-comp-chips-outline-width-unselected) solid ButtonText}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip__cell,.m3e-suggestion-chip) .m3e-icon{color:ButtonText}.m3e-filter-chip:has(>.m3e-filter-chip__input:checked),.m3e-input-chip[aria-selected=true]{border-color:Highlight;outline:var(--m3e-comp-chips-outline-width-unselected) solid Highlight}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]),:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]) .m3e-icon,.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled),.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled) .m3e-icon{border-color:GrayText;color:GrayText}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"@kyralabs/m3e-tokens/components/chips.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@import"@kyralabs/m3e-tokens/components/elevation-motion.css";@import"@kyralabs/m3e-tokens/components/filter-chip.css";@import"@kyralabs/m3e-tokens/components/chips-defaults.css";@property --_m3e-chip-shape{syntax: "<length-percentage>"; inherits: false; initial-value: 0%;}@layer m3e.components{:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip){--_m3e-chip-outline: inset 0 0 0 var(--_m3e-chip-outline-width) var(--_m3e-chip-outline-color);--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-outgoing-duration-hovered);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-outgoing-easing);--m3e-comp-state-layer-color: var(--_m3e-chip-state-layer);display:inline-flex;align-items:center;box-sizing:border-box;min-block-size:var(--_m3e-chip-height);margin:0;padding-block:0;padding-inline:var(--_m3e-chip-padding-start) var(--_m3e-chip-padding-end);border:none;border-radius:var(--_m3e-chip-shape);background-color:var(--_m3e-chip-container);box-shadow:var(--_m3e-chip-shadow);color:var(--_m3e-chip-label);font-family:var(--_m3e-chip-font);font-size:var(--_m3e-chip-font-size);font-weight:var(--_m3e-chip-font-weight);line-height:var(--_m3e-chip-line-height);letter-spacing:var(--_m3e-chip-tracking);text-align:start;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--_m3e-chip-shadow-duration) var(--_m3e-chip-shadow-easing)}:is(.m3e-filter-chip--expressive,.m3e-input-chip--expressive){transition:box-shadow var(--_m3e-chip-shadow-duration) var(--_m3e-chip-shadow-easing),border-radius var(--m3e-comp-selectable-chip-shape-duration) var(--m3e-comp-selectable-chip-shape-easing)}:is(.m3e-filter-chip--expressive,.m3e-input-chip--expressive)[data-spring]{transition-property:box-shadow}.m3e-input-chip__cell{display:flex;flex:1 1 auto;align-items:center;align-self:stretch;min-inline-size:0}:is(.m3e-assist-chip__label,.m3e-filter-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label){flex:1 1 auto;padding-inline:var(--_m3e-chip-label-start) var(--_m3e-chip-label-end)}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip__cell,.m3e-suggestion-chip) .m3e-icon{--m3e-comp-icon-size: var(--_m3e-chip-icon-size);color:var(--_m3e-chip-leading)}:is(.m3e-assist-chip__label,.m3e-filter-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label)~.m3e-icon,:is(.m3e-assist-chip__label,.m3e-filter-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label)~* .m3e-icon{color:var(--_m3e-chip-trailing)}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip):after{content:"";position:absolute;inset-block:min(0%,calc((var(--_m3e-chip-height) - var(--m3e-comp-minimum-interactive-component-size)) / 2));inset-inline:min(0%,calc((100% - var(--m3e-comp-minimum-interactive-component-size)) / 2))}@media(hover:hover){:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip):hover{--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);box-shadow:var(--_m3e-chip-shadow-hovered)}}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):focus-visible,.m3e-filter-chip:has(>.m3e-filter-chip__input:focus-visible){--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);box-shadow:var(--_m3e-chip-shadow-focused)}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:active,[data-pressed]){--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);box-shadow:var(--_m3e-chip-shadow-pressed)}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip)[data-dragged]{--_m3e-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);box-shadow:var(--_m3e-chip-shadow-dragged)}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]),.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled){background-color:var(--_m3e-chip-container-disabled);box-shadow:var(--_m3e-chip-shadow-disabled);color:var(--_m3e-chip-label-disabled);cursor:default;transition:none}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]) .m3e-icon,.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled) .m3e-icon{color:var(--_m3e-chip-leading-disabled)}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]) :is(.m3e-assist-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label)~* .m3e-icon,:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]) :is(.m3e-assist-chip__label,.m3e-input-chip__label,.m3e-suggestion-chip__label)~.m3e-icon,.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled) .m3e-filter-chip__label~.m3e-icon{color:var(--_m3e-chip-trailing-disabled)}@media(forced-colors:active){:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip,.m3e-suggestion-chip){border:var(--m3e-comp-chips-outline-width-unselected) solid ButtonText}:is(.m3e-assist-chip,.m3e-filter-chip,.m3e-input-chip__cell,.m3e-suggestion-chip) .m3e-icon{color:ButtonText}.m3e-filter-chip:has(>.m3e-filter-chip__input:checked),.m3e-input-chip[aria-selected=true]{border-color:Highlight;outline:var(--m3e-comp-chips-outline-width-unselected) solid Highlight}:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]),:is(.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip):is(:disabled,[aria-disabled=true]) .m3e-icon,.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled),.m3e-filter-chip:has(>.m3e-filter-chip__input:disabled) .m3e-icon{border-color:GrayText;color:GrayText}}}@layer m3e.components{.m3e-filter-chip{--_m3e-chip-height: var(--m3e-comp-filter-chip-container-height);--_m3e-chip-padding-start: var(--m3e-comp-filter-chip-content-padding-horizontal);--_m3e-chip-padding-end: var(--m3e-comp-filter-chip-content-padding-horizontal);--_m3e-chip-label-start: var(--m3e-comp-chip-default-horizontal-spacing);--_m3e-chip-label-end: var(--m3e-comp-chip-default-horizontal-spacing);--_m3e-chip-shape: var(--m3e-comp-filter-chip-container-shape);--_m3e-chip-icon-size: var(--m3e-comp-filter-chip-icon-size);--_m3e-chip-font: var(--m3e-comp-filter-chip-label-text-font);--_m3e-chip-font-size: var(--m3e-comp-filter-chip-label-text-size);--_m3e-chip-font-weight: var(--m3e-comp-filter-chip-label-text-weight);--_m3e-chip-line-height: var(--m3e-comp-filter-chip-label-text-line-height);--_m3e-chip-tracking: var(--m3e-comp-filter-chip-label-text-tracking);--_m3e-chip-icon-fade-in-duration: var(--m3e-comp-selectable-chip-icon-fade-in-duration);--_m3e-chip-icon-fade-in-easing: var(--m3e-comp-selectable-chip-icon-fade-in-easing);--_m3e-chip-icon-fade-out-duration: var(--m3e-comp-selectable-chip-icon-fade-out-duration);--_m3e-chip-icon-fade-out-easing: var(--m3e-comp-selectable-chip-icon-fade-out-easing);--_m3e-chip-icon-expand-duration: var(--m3e-comp-selectable-chip-icon-expand-duration);--_m3e-chip-icon-expand-easing: var(--m3e-comp-selectable-chip-icon-expand-easing);--_m3e-chip-icon-shrink-duration: var(--m3e-comp-selectable-chip-icon-shrink-duration);--_m3e-chip-icon-shrink-easing: var(--m3e-comp-selectable-chip-icon-shrink-easing);--_m3e-chip-outline-width: var(--m3e-comp-filter-chip-flat-outline-width-unselected);--_m3e-chip-outline-color: var(--m3e-comp-filter-chip-flat-outline-color-unselected);--_m3e-chip-container: transparent;--_m3e-chip-shadow: var(--_m3e-chip-outline);--_m3e-chip-shadow-hovered: var(--m3e-comp-filter-chip-flat-shadow-hover), var(--_m3e-chip-outline);--_m3e-chip-shadow-focused: var(--_m3e-chip-outline);--_m3e-chip-shadow-pressed: var(--_m3e-chip-outline);--_m3e-chip-shadow-dragged: var(--m3e-comp-filter-chip-flat-shadow-dragged), var(--_m3e-chip-outline);--_m3e-chip-shadow-disabled: inset 0 0 0 var(--_m3e-chip-outline-width) color-mix( in srgb, var(--m3e-comp-filter-chip-flat-outline-color-disabled-unselected) calc(var(--m3e-comp-filter-chip-flat-outline-opacity-disabled-unselected) * 100%), transparent );--_m3e-chip-container-disabled: transparent;--_m3e-chip-label: var(--m3e-comp-filter-chip-label-text-color-unselected);--_m3e-chip-state-layer: var(--m3e-sys-color-on-surface);--_m3e-chip-leading: var(--m3e-comp-filter-chip-leading-icon-color-unselected);--_m3e-chip-trailing: var(--m3e-comp-filter-chip-trailing-icon-color-unselected);--_m3e-chip-label-disabled: color-mix( in srgb, var(--m3e-comp-filter-chip-label-text-color-disabled) calc(var(--m3e-comp-filter-chip-label-text-opacity-disabled) * 100%), transparent );--_m3e-chip-leading-disabled: color-mix( in srgb, var(--m3e-comp-filter-chip-leading-icon-color-disabled) calc(var(--m3e-comp-filter-chip-leading-icon-opacity-disabled) * 100%), transparent );--_m3e-chip-trailing-disabled: color-mix( in srgb, var(--m3e-comp-filter-chip-trailing-icon-color-disabled) calc(var(--m3e-comp-filter-chip-trailing-icon-opacity-disabled) * 100%), transparent )}.m3e-filter-chip__input{appearance:none;position:absolute;inset-block:min(0%,calc((var(--_m3e-chip-height) - var(--m3e-comp-minimum-interactive-component-size)) / 2));inset-inline:min(0%,calc((100% - var(--m3e-comp-minimum-interactive-component-size)) / 2));z-index:1;box-sizing:border-box;inline-size:auto;block-size:auto;margin:0;padding:0;border:0;background:none;cursor:inherit;outline:none}.m3e-filter-chip__leading{display:inline-flex;flex:none;align-items:center;inline-size:0;overflow:clip;opacity:0;transition:inline-size var(--_m3e-chip-icon-shrink-duration) var(--_m3e-chip-icon-shrink-easing),opacity var(--_m3e-chip-icon-fade-out-duration) var(--_m3e-chip-icon-fade-out-easing)}.m3e-filter-chip__leading:is(:has(>.m3e-icon:not(.m3e-filter-chip__check)),.m3e-filter-chip:has(>.m3e-filter-chip__input:checked)>*){inline-size:var(--_m3e-chip-icon-size);opacity:1;transition:inline-size var(--_m3e-chip-icon-expand-duration) var(--_m3e-chip-icon-expand-easing),opacity var(--_m3e-chip-icon-fade-in-duration) var(--_m3e-chip-icon-fade-in-easing)}.m3e-filter-chip__check,.m3e-filter-chip:has(>.m3e-filter-chip__input:checked)>.m3e-filter-chip__leading>.m3e-icon:not(.m3e-filter-chip__check){display:none}.m3e-filter-chip:has(>.m3e-filter-chip__input:checked) .m3e-filter-chip__check{display:inline-block}.m3e-filter-chip:has(>.m3e-filter-chip__input:checked){--_m3e-chip-outline-width: var(--m3e-comp-filter-chip-flat-outline-width-selected);--_m3e-chip-outline-color: transparent;--_m3e-chip-container: var(--m3e-comp-filter-chip-flat-container-color-selected);--_m3e-chip-container-disabled: color-mix( in srgb, var(--m3e-comp-filter-chip-flat-container-color-disabled-selected) calc(var(--m3e-comp-filter-chip-flat-container-opacity-disabled-selected) * 100%), transparent );--_m3e-chip-label: var(--m3e-comp-filter-chip-label-text-color-selected);--_m3e-chip-state-layer: var(--m3e-comp-filter-chip-label-text-color-selected);--_m3e-chip-leading: var(--m3e-comp-filter-chip-leading-icon-color-selected);--_m3e-chip-trailing: var(--m3e-comp-filter-chip-trailing-icon-color-selected)}.m3e-filter-chip--elevated{--_m3e-chip-container: var(--m3e-comp-filter-chip-elevated-container-color-unselected);--_m3e-chip-shadow: var(--m3e-comp-filter-chip-elevated-container-shadow);--_m3e-chip-shadow-hovered: var(--m3e-comp-filter-chip-elevated-container-shadow-hover);--_m3e-chip-shadow-focused: var(--m3e-comp-filter-chip-elevated-container-shadow-focus);--_m3e-chip-shadow-pressed: var(--m3e-comp-filter-chip-elevated-container-shadow-pressed);--_m3e-chip-shadow-dragged: var(--m3e-comp-filter-chip-container-shadow-dragged);--_m3e-chip-shadow-disabled: var(--m3e-comp-filter-chip-elevated-container-shadow-disabled);--_m3e-chip-container-disabled: color-mix( in srgb, var(--m3e-comp-filter-chip-elevated-container-color-disabled) calc(var(--m3e-comp-filter-chip-elevated-container-opacity-disabled) * 100%), transparent )}.m3e-filter-chip--elevated:has(>.m3e-filter-chip__input:checked){--_m3e-chip-container: var(--m3e-comp-filter-chip-elevated-container-color-selected);--_m3e-chip-container-disabled: color-mix( in srgb, var(--m3e-comp-filter-chip-elevated-container-color-disabled) calc(var(--m3e-comp-filter-chip-elevated-container-opacity-disabled) * 100%), transparent )}.m3e-filter-chip--expressive{--_m3e-chip-shape: min( var(--m3e-comp-chips-shape-unselected), calc(var(--_m3e-chip-height) / 2) );--_m3e-chip-leading: var(--m3e-comp-filter-chip-leading-icon-color-tonal);--_m3e-chip-icon-fade-in-duration: var( --m3e-comp-selectable-chip-expressive-icon-fade-in-duration );--_m3e-chip-icon-fade-in-easing: var(--m3e-comp-selectable-chip-expressive-icon-fade-in-easing);--_m3e-chip-icon-fade-out-duration: var( --m3e-comp-selectable-chip-expressive-icon-fade-out-duration );--_m3e-chip-icon-fade-out-easing: var( --m3e-comp-selectable-chip-expressive-icon-fade-out-easing );--_m3e-chip-icon-expand-duration: var( --m3e-comp-selectable-chip-expressive-icon-expand-duration );--_m3e-chip-icon-expand-easing: var(--m3e-comp-selectable-chip-expressive-icon-expand-easing);--_m3e-chip-icon-shrink-duration: var( --m3e-comp-selectable-chip-expressive-icon-shrink-duration );--_m3e-chip-icon-shrink-easing: var(--m3e-comp-selectable-chip-expressive-icon-shrink-easing)}.m3e-filter-chip--expressive:has(>.m3e-filter-chip__input:checked){--_m3e-chip-shape: min(var(--m3e-comp-chips-shape-selected), calc(var(--_m3e-chip-height) / 2))}.m3e-filter-chip--expressive:is(:active,[data-pressed]):not(:has(>.m3e-filter-chip__input:disabled)){--_m3e-chip-shape: min(var(--m3e-comp-chips-shape-pressed), calc(var(--_m3e-chip-height) / 2))}.m3e-filter-chip--expressive:is(:has(>.m3e-filter-chip__input:checked),:has(>.m3e-filter-chip__leading>.m3e-icon:not(.m3e-filter-chip__check)),:has(>.m3e-filter-chip__label~.m3e-icon)){--_m3e-chip-label-start: var(--m3e-comp-filter-chip-compact-horizontal-spacing)}.m3e-filter-chip--expressive:is(:has(>.m3e-filter-chip__input:checked),:has(>.m3e-filter-chip__leading>.m3e-icon:not(.m3e-filter-chip__check))):has(>.m3e-filter-chip__label~.m3e-icon){--_m3e-chip-label-end: var(--m3e-comp-filter-chip-compact-horizontal-spacing)}.m3e-filter-chip--expressive:not(:has(>.m3e-filter-chip__input:checked),:has(>.m3e-filter-chip__leading>.m3e-icon:not(.m3e-filter-chip__check))):has(>.m3e-filter-chip__label~.m3e-icon){--_m3e-chip-label-end: var(--m3e-comp-filter-chip-horizontal-spacing)}.m3e-filter-chip--expressive:is(:has(>.m3e-filter-chip__input:checked),:has(>.m3e-filter-chip__leading>.m3e-icon:not(.m3e-filter-chip__check))):not(:has(>.m3e-filter-chip__label~.m3e-icon)){--_m3e-chip-label-end: var(--m3e-comp-filter-chip-horizontal-spacing)}}
|
package/dist/focus-ring.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer m3e.base{:where(.m3e-focus-ring,.m3e-button,.m3e-icon-button,.m3e-assist-chip,.m3e-fab,.m3e-extended-fab,.m3e-fab-menu__item):focus-visible{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-card--interactive):has(.m3e-card__action:focus-visible){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-navigation-item:focus-visible .m3e-navigation-item__state){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-focus-ring--inward):focus-visible{outline-offset:var(--m3e-sys-state-focus-indicator-inner-offset)}:where(.m3e-menu__item):focus-visible{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-inner-offset)}:where(.m3e-menu__item):focus:not(:focus-visible){outline:none}:where(.m3e-search__field):has(.m3e-search__input:focus-visible),:where(.m3e-search__result)[data-focus-visible]{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-inner-offset)}:where(.m3e-focus-ring,.m3e-button,.m3e-icon-button,.m3e-assist-chip,.m3e-fab,.m3e-extended-fab,.m3e-fab-menu__item):focus:not(:focus-visible){outline:none}@media(forced-colors:active){:where(.m3e-focus-ring,.m3e-button,.m3e-icon-button,.m3e-assist-chip,.m3e-fab,.m3e-extended-fab,.m3e-fab-menu__item):focus-visible,:where(.m3e-card--interactive):has(.m3e-card__action:focus-visible),:where(.m3e-navigation-item:focus-visible .m3e-navigation-item__state),:where(.m3e-menu__item):focus-visible,:where(.m3e-search__field):has(.m3e-search__input:focus-visible),:where(.m3e-search__result)[data-focus-visible]{outline-color:Highlight}}}
|
|
1
|
+
@layer m3e.base{:where(.m3e-focus-ring,.m3e-button,.m3e-icon-button,.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-fab-menu__item,.m3e-pane-scaffold__drag-handle):focus-visible{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-card--interactive):has(.m3e-card__action:focus-visible){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-filter-chip):has(>.m3e-filter-chip__input:focus-visible){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-navigation-item:focus-visible .m3e-navigation-item__state){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-checkbox__input:focus-visible~.m3e-checkbox__state,.m3e-radio-button__input:focus-visible~.m3e-radio-button__state){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-switch__input:focus-visible~.m3e-switch__track){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-slider__input:focus-visible+.m3e-slider__handle){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-focus-ring--inward):focus-visible{outline-offset:var(--m3e-sys-state-focus-indicator-inner-offset)}:where(.m3e-menu__item,.m3e-list-item--interactive,.m3e-navigation-drawer-item,.m3e-tab,.m3e-tab-panel,.m3e-pane-scaffold__pane):focus-visible{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-inner-offset)}:where(.m3e-menu__item,.m3e-list-item--interactive,.m3e-navigation-drawer-item,.m3e-tab,.m3e-tab-panel,.m3e-pane-scaffold__pane):focus:not(:focus-visible){outline:none}:where(.m3e-search__field):has(.m3e-search__input:focus-visible),:where(.m3e-search__result)[data-focus-visible]{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-inner-offset)}:where(.m3e-focus-ring,.m3e-button,.m3e-icon-button,.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-fab-menu__item,.m3e-pane-scaffold__drag-handle):focus:not(:focus-visible){outline:none}@media(forced-colors:active){:where(.m3e-focus-ring,.m3e-button,.m3e-icon-button,.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-fab-menu__item,.m3e-pane-scaffold__drag-handle):focus-visible,:where(.m3e-card--interactive):has(.m3e-card__action:focus-visible),:where(.m3e-filter-chip):has(>.m3e-filter-chip__input:focus-visible),:where(.m3e-navigation-item:focus-visible .m3e-navigation-item__state),:where(.m3e-checkbox__input:focus-visible~.m3e-checkbox__state),:where(.m3e-radio-button__input:focus-visible~.m3e-radio-button__state),:where(.m3e-switch__input:focus-visible~.m3e-switch__track),:where(.m3e-slider__input:focus-visible+.m3e-slider__handle),:where(.m3e-menu__item,.m3e-list-item--interactive,.m3e-navigation-drawer-item,.m3e-tab,.m3e-tab-panel,.m3e-pane-scaffold__pane):focus-visible,:where(.m3e-search__field):has(.m3e-search__input:focus-visible),:where(.m3e-search__result)[data-focus-visible]{outline-color:Highlight}}}
|