mtrl 0.5.2 → 0.5.4

package/src/styles/components/_chips.scss

@@ -0,0 +1,643 @@
+// src/styles/components/_chips.scss
+@use "../abstract/base" as base;
+@use "../abstract/variables" as v;
+@use "../abstract/functions" as f;
+@use "../abstract/mixins" as m;
+@use "../abstract/theme" as t;
+
+$component: "#{base.$prefix}-chip";
+$container: "#{base.$prefix}-chips";
+
+// Chip component styling
+.#{$component} {
+    // Base styles
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: v.chip("height");
+    padding: 0 v.chip("padding-horizontal");
+    border-radius: v.chip("border-radius");
+    background-color: transparent;
+    max-width: 100%;
+    user-select: none;
+    cursor: pointer;
+
+    // Typography
+    @include m.typography("label-large");
+    // Enhanced transition for width changes
+    transition:
+        background-color v.motion("duration-short4") v.motion("easing-standard"),
+        color v.motion("duration-short4") v.motion("easing-standard"),
+        // border-color v.motion('duration-short4') v.motion('easing-standard'),
+        box-shadow v.motion("duration-short4") v.motion("easing-standard"),
+        // padding v.motion('duration-short4') v.motion('easing-standard'),
+        width v.motion("duration-short4") v.motion("easing-standard");
+
+    // Focus styles
+    &:focus {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: 2px solid t.color("outline");
+        outline-offset: 2px;
+    }
+
+    // Active state - applied when the chip has a menu open
+    &--active {
+        // Base active state styling
+        // Will use variant-specific implementations below
+
+        // ARIA attribute to indicate active state for accessibility
+        &[aria-expanded="true"] {
+            // For compatibility with ARIA
+        }
+    }
+
+    // Disabled state
+    &--disabled {
+        opacity: 0.38;
+        pointer-events: none;
+    }
+
+    // Content container
+    &-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        gap: v.spacing("2");
+    }
+
+    // Ensure proper layout with icons - independent of scrollable state
+    &-leading-icon,
+    &-trailing-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: v.chip("icon-size");
+        height: v.chip("icon-size");
+        flex-shrink: 0;
+        position: relative; // Add this to ensure stable positioning
+
+        svg {
+            width: v.chip("icon-size");
+            height: v.chip("icon-size");
+        }
+    }
+
+    &-leading-icon {
+        margin-right: 0; // Gap is handled by the content container
+    }
+
+    &-trailing-icon {
+        margin-left: 0; // Gap is handled by the content container
+
+        &:hover {
+            opacity: 0.8;
+        }
+    }
+
+    &-text {
+        // Allow text to display normally
+        white-space: nowrap;
+        overflow: visible;
+    }
+
+    // Selected state (base)
+    &--selected {
+        font-weight: 500;
+    }
+
+    // Ripple container - state layers for interaction feedback
+    .ripple {
+        position: absolute;
+        border-radius: 50%;
+        transform: scale(0);
+        pointer-events: none;
+        background-color: currentColor;
+        opacity: 0.12;
+    }
+
+    // ====== CHIP VARIANTS ======
+
+    // Filled chip
+    &--filled {
+        background-color: t.color("surface-container-highest");
+        color: t.color("on-surface");
+
+        &:hover::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.08;
+            pointer-events: none;
+            border-radius: v.chip("border-radius");
+        }
+
+        &:active::after,
+        &.#{$component}--active::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.12;
+            pointer-events: none;
+            border-radius: inherit;
+        }
+
+        &.#{$component}--selected {
+            background-color: t.color("secondary-container");
+            color: t.color("on-secondary-container");
+
+            &:hover::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.08;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+
+            &:active::after,
+            &.#{$component}--active::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.12;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+        }
+    }
+
+    // Outlined chip
+    &--outlined {
+        border: 1px solid t.alpha("outline", v.chip("outlined-border-opacity"));
+        color: t.color("on-surface");
+
+        &:hover::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.08;
+            pointer-events: none;
+            border-radius: inherit;
+        }
+
+        &:focus-visible {
+            border-color: t.alpha(
+                "outline",
+                v.chip("outlined-border-focus-opacity")
+            );
+        }
+
+        &:active::after,
+        &.#{$component}--active::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.12;
+            pointer-events: none;
+            border-radius: inherit;
+        }
+
+        &.#{$component}--selected {
+            border-color: transparent;
+            background-color: t.color("secondary-container");
+            color: t.color("on-secondary-container");
+
+            &:hover::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.08;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+
+            &:active::after,
+            &.#{$component}--active::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.12;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+        }
+    }
+
+    // Elevated chip
+    &--elevated {
+        background-color: t.color("surface-container-low");
+        color: t.color("on-surface");
+        box-shadow: f.get-elevation(1);
+
+        &:hover::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.08;
+            pointer-events: none;
+            border-radius: inherit;
+        }
+
+        &:active::after,
+        &.#{$component}--active::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.12;
+            pointer-events: none;
+            border-radius: inherit;
+        }
+
+        &.#{$component}--selected {
+            background-color: t.color("secondary-container");
+            color: t.color("on-secondary-container");
+
+            &:hover::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.08;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+
+            &:active::after,
+            &.#{$component}--active::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.12;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+        }
+    }
+
+    // Filter chip
+    &--filter {
+        color: t.color("on-surface");
+        position: relative;
+        border: 1px solid t.alpha("outline", v.chip("outlined-border-opacity"));
+
+        // Hover state for unselected chips
+        &:hover::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.08;
+            pointer-events: none;
+            border-radius: calc(v.chip("border-radius") - 1px);
+        }
+
+        &:active::after,
+        &.#{$component}--active::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.12;
+            pointer-events: none;
+            border-radius: calc(v.chip("border-radius") - 1px);
+        }
+
+        &.#{$component}--selected {
+            padding-left: 8px;
+            background-color: t.color("secondary-container");
+            color: t.color("on-secondary-container");
+            --checkmark-color: currentColor; // Will inherit from text color
+            border: none;
+            .#{$component}-leading-icon {
+                color: t.color("on-secondary-container");
+            }
+
+            // Use ::before exclusively for the checkmark icon with mask technique
+            &::before {
+                content: "";
+                display: inline-block;
+                width: 18px;
+                height: 18px;
+                background-color: var(--checkmark-color);
+                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
+                mask-position: center;
+                mask-repeat: no-repeat;
+                mask-size: contain;
+                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
+                -webkit-mask-position: center;
+                -webkit-mask-repeat: no-repeat;
+                -webkit-mask-size: contain;
+                margin-right: 8px;
+                flex-shrink: 0;
+                position: static;
+                animation: checkmark-appear v.motion("duration-short4")
+                    v.motion("easing-emphasized") forwards;
+            }
+
+            // Hover state for selected chips
+            &:hover::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.08;
+                pointer-events: none;
+                border-radius: calc(v.chip("border-radius") - 1px);
+            }
+
+            &:active::after,
+            &.#{$component}--active::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.12;
+                pointer-events: none;
+                border-radius: calc(v.chip("border-radius") - 1px);
+            }
+        }
+    }
+
+    // Assist chip
+    &--assist {
+        background-color: t.color("surface-container-low");
+        color: t.color("on-surface");
+
+        .#{$component}-leading-icon {
+            color: t.color("primary");
+        }
+
+        &:hover::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.08;
+            pointer-events: none;
+            border-radius: v.chip("border-radius");
+        }
+
+        &:active::after,
+        &.#{$component}--active::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.12;
+            pointer-events: none;
+            border-radius: v.chip("border-radius");
+        }
+
+        &.#{$component}--selected {
+            background-color: t.color("secondary-container");
+            color: t.color("on-secondary-container");
+
+            .#{$component}-leading-icon {
+                color: t.color("on-secondary-container");
+            }
+
+            &:hover::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.08;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+
+            &:active::after,
+            &.#{$component}--active::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.12;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+        }
+    }
+
+    // Input chip
+    &--input {
+        background-color: t.color("surface-container-highest");
+        color: t.color("on-surface");
+        border-radius: v.chip("border-radius");
+
+        .#{$component}-trailing-icon {
+            cursor: pointer;
+
+            &:hover {
+                color: t.color("error");
+            }
+        }
+
+        &:hover::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.08;
+            pointer-events: none;
+            border-radius: inherit;
+        }
+
+        &:active::after,
+        &.#{$component}--active::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.12;
+            pointer-events: none;
+            border-radius: inherit;
+        }
+    }
+
+    // Suggestion chip
+    &--suggestion {
+        background-color: t.color("surface-container");
+        color: t.color("on-surface");
+        height: v.chip("suggestion-height");
+
+        .#{$component}-leading-icon {
+            width: v.chip("suggestion-icon-size");
+            height: v.chip("suggestion-icon-size");
+
+            svg {
+                width: v.chip("suggestion-icon-size");
+                height: v.chip("suggestion-icon-size");
+            }
+        }
+
+        &:hover::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.08;
+            pointer-events: none;
+            border-radius: inherit;
+        }
+
+        &:active::after,
+        &.#{$component}--active::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.12;
+            pointer-events: none;
+            border-radius: inherit;
+        }
+
+        &.#{$component}--selected {
+            background-color: t.color("secondary-container");
+            color: t.color("on-secondary-container");
+
+            &:hover::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.08;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+
+            &:active::after,
+            &.#{$component}--active::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.12;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+        }
+    }
+}
+
+// Animation for checkmark appearance
+@keyframes checkmark-appear {
+    from {
+        transform: scale(0);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+// Chips container
+.#{$container} {
+    display: flex;
+    flex-wrap: wrap;
+    gap: v.spacing("2");
+    width: 100%;
+    min-height: fit-content;
+    height: auto;
+
+    // Label styling
+    &-label {
+        @include m.typography("label-medium");
+        font-size: 16px;
+        color: t.color("on-surface-variant");
+        // margin-bottom: v.spacing("2");
+        display: block;
+        width: 100%;
+    }
+
+    // Layout with label
+    &--with-label {
+        display: flex;
+        flex-direction: column;
+
+        // When label is at the end
+        &.#{$container}--label-end {
+            flex-direction: column-reverse;
+
+            .#{$container}-label {
+                margin-bottom: 0;
+                margin-top: v.spacing("2");
+            }
+        }
+    }
+
+    // Container for chips
+    &-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: v.spacing("2");
+        width: 100%;
+    }
+
+    // Important: Scrollable state only affects the container, not the chip icons
+    &--scrollable {
+        .#{$container}-container {
+            flex-wrap: nowrap;
+            overflow-x: auto;
+            overflow-y: visible; // Don't clip chips vertically
+            -webkit-overflow-scrolling: touch;
+            scroll-behavior: smooth;
+            padding-bottom: v.spacing("2");
+
+            // Enhanced scrollable behavior
+            position: relative;
+            white-space: nowrap;
+
+            // Improved scrollbar styling
+            &::-webkit-scrollbar {
+                height: 4px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                background-color: t.alpha("on-surface", 0.2);
+                border-radius: 4px;
+            }
+
+            &::-webkit-scrollbar-track {
+                background-color: t.alpha("on-surface", 0.05);
+                border-radius: 4px;
+            }
+
+            // Style for Firefox
+            scrollbar-width: thin;
+            scrollbar-color: t.alpha("on-surface", 0.2)
+                t.alpha("on-surface", 0.05);
+
+            // Ensure chip visibility without affecting internal structure
+            .#{$component} {
+                flex-shrink: 0; // Prevent chips from shrinking
+            }
+        }
+    }
+
+    &--vertical {
+        .#{$container}-container {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: v.spacing("2");
+        }
+    }
+}