@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 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
 
@@ -1 +1 @@
1
- @import"@kyralabs/m3e-tokens/components/assist-chip.css";@import"@kyralabs/m3e-tokens/components/assist-chip-defaults.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@import"@kyralabs/m3e-tokens/components/elevation-motion.css";@layer m3e.components{.m3e-assist-chip{--_m3e-assist-chip-outline: inset 0 0 0 var(--m3e-comp-assist-chip-flat-outline-width) var(--m3e-comp-assist-chip-flat-outline-color);--_m3e-assist-chip-container: transparent;--_m3e-assist-chip-shadow: var(--_m3e-assist-chip-outline);--_m3e-assist-chip-shadow-hovered: var(--_m3e-assist-chip-outline);--_m3e-assist-chip-shadow-focused: var(--_m3e-assist-chip-outline);--_m3e-assist-chip-shadow-pressed: var(--_m3e-assist-chip-outline);--_m3e-assist-chip-shadow-dragged: var(--m3e-comp-assist-chip-container-shadow-dragged), var(--_m3e-assist-chip-outline);--_m3e-assist-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-assist-chip-container-disabled: transparent;--_m3e-assist-chip-label: var(--m3e-comp-assist-chip-label-text-color);--_m3e-assist-chip-icon: var(--m3e-comp-assist-chip-icon-color);--_m3e-assist-chip-shadow-duration: var(--m3e-comp-elevation-outgoing-duration-hovered);--_m3e-assist-chip-shadow-easing: var(--m3e-comp-elevation-outgoing-easing);--m3e-comp-state-layer-color: var(--_m3e-assist-chip-label);display:inline-flex;align-items:center;box-sizing:border-box;min-block-size:var(--m3e-comp-assist-chip-container-height);margin:0;padding-block:0;padding-inline:var(--m3e-comp-assist-chip-content-padding-horizontal);border:none;border-radius:var(--m3e-comp-assist-chip-container-shape);background-color:var(--_m3e-assist-chip-container);box-shadow:var(--_m3e-assist-chip-shadow);color:var(--_m3e-assist-chip-label);font-family:var(--m3e-comp-assist-chip-label-text-font);font-size:var(--m3e-comp-assist-chip-label-text-size);font-weight:var(--m3e-comp-assist-chip-label-text-weight);line-height:var(--m3e-comp-assist-chip-label-text-line-height);letter-spacing:var(--m3e-comp-assist-chip-label-text-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-assist-chip-shadow-duration) var(--_m3e-assist-chip-shadow-easing)}.m3e-assist-chip__label{flex:1 1 auto;padding-inline:var(--m3e-comp-assist-chip-horizontal-spacing)}.m3e-assist-chip>.m3e-icon{--m3e-comp-icon-size: var(--m3e-comp-assist-chip-icon-size);color:var(--_m3e-assist-chip-icon)}.m3e-assist-chip:after{content:"";position:absolute;inset-block:min(0%,calc((var(--m3e-comp-assist-chip-container-height) - var(--m3e-comp-minimum-interactive-component-size)) / 2));inset-inline:min(0%,calc((100% - var(--m3e-comp-minimum-interactive-component-size)) / 2))}.m3e-assist-chip--elevated{--_m3e-assist-chip-container: var(--m3e-comp-assist-chip-elevated-container-color);--_m3e-assist-chip-shadow: var(--m3e-comp-assist-chip-elevated-container-shadow);--_m3e-assist-chip-shadow-hovered: var(--m3e-comp-assist-chip-elevated-container-shadow-hover);--_m3e-assist-chip-shadow-focused: var(--m3e-comp-assist-chip-elevated-container-shadow-focus);--_m3e-assist-chip-shadow-pressed: var( --m3e-comp-assist-chip-elevated-container-shadow-pressed );--_m3e-assist-chip-shadow-dragged: var(--m3e-comp-assist-chip-container-shadow-dragged);--_m3e-assist-chip-shadow-disabled: var( --m3e-comp-assist-chip-elevated-container-shadow-disabled );--_m3e-assist-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 )}@media(hover:hover){.m3e-assist-chip:hover{--_m3e-assist-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-assist-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);--_m3e-assist-chip-label: var(--m3e-comp-assist-chip-label-text-color-hover);--_m3e-assist-chip-icon: var(--m3e-comp-assist-chip-icon-color-hover);box-shadow:var(--_m3e-assist-chip-shadow-hovered)}}.m3e-assist-chip:focus-visible{--_m3e-assist-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-assist-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);--_m3e-assist-chip-label: var(--m3e-comp-assist-chip-label-text-color-focus);--_m3e-assist-chip-icon: var(--m3e-comp-assist-chip-icon-color-focus);box-shadow:var(--_m3e-assist-chip-shadow-focused)}.m3e-assist-chip:is(:active,[data-pressed]){--_m3e-assist-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-assist-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);--_m3e-assist-chip-label: var(--m3e-comp-assist-chip-label-text-color-pressed);--_m3e-assist-chip-icon: var(--m3e-comp-assist-chip-icon-color-pressed);box-shadow:var(--_m3e-assist-chip-shadow-pressed)}.m3e-assist-chip[data-dragged]{--_m3e-assist-chip-shadow-duration: var(--m3e-comp-elevation-incoming-duration);--_m3e-assist-chip-shadow-easing: var(--m3e-comp-elevation-incoming-easing);--_m3e-assist-chip-label: var(--m3e-comp-assist-chip-label-text-color-dragged);--_m3e-assist-chip-icon: var(--m3e-comp-assist-chip-icon-color-dragged);box-shadow:var(--_m3e-assist-chip-shadow-dragged)}.m3e-assist-chip:is(:disabled,[aria-disabled=true]){--_m3e-assist-chip-label: 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-assist-chip-icon: color-mix( in srgb, var(--m3e-comp-assist-chip-icon-color-disabled) calc(var(--m3e-comp-assist-chip-icon-opacity-disabled) * 100%), transparent );background-color:var(--_m3e-assist-chip-container-disabled);box-shadow:var(--_m3e-assist-chip-shadow-disabled);cursor:default;transition:none}@media(forced-colors:active){.m3e-assist-chip{border:var(--m3e-comp-assist-chip-flat-outline-width) solid ButtonText}.m3e-assist-chip>.m3e-icon{color:ButtonText}.m3e-assist-chip:is(:disabled,[aria-disabled=true]),.m3e-assist-chip:is(:disabled,[aria-disabled=true])>.m3e-icon{border-color:GrayText;color:GrayText}}}
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)}}
@@ -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}}}