material 1.0.3 → 3.0.0-next.0

package/src/styles/components/_loading-indicator.scss

@@ -0,0 +1,41 @@
+// src/styles/components/_loading-indicator.scss
+//
+// Loading indicator (Compose Material 3 LoadingIndicatorTokens.kt): a 48dp
+// container, the active indicator in primary, and a contained variant on a
+// primary-container circle with the indicator in on-primary-container. The
+// shapes are drawn on a canvas that reads the element's colour.
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-loading-indicator';
+
+.#{$component} {
+  --#{base.$prefix}-loading-indicator-size: 48px;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--#{base.$prefix}-loading-indicator-size);
+  height: var(--#{base.$prefix}-loading-indicator-size);
+  color: t.color('primary');
+  border-radius: f.get-shape('full');
+  vertical-align: middle;
+
+  &--contained {
+    background-color: t.color('primary-container');
+    color: t.color('on-primary-container');
+  }
+
+  &__canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include m.print {
+    display: none;
+  }
+}

package/src/styles/components/_menu.scss

@@ -0,0 +1,609 @@
+// src/styles/components/_menu.scss
+@use "../../styles/abstract/base" as base;
+@use "../../styles/abstract/variables" as v;
+@use "../../styles/abstract/mixins" as m;
+@use "../../styles/abstract/functions" as f;
+@use "../../styles/abstract/theme" as t;
+
+$prefix: base.$prefix;
+
+$component: "#{$prefix}-menu";
+
+.#{$component} {
+    // Base styles
+    @include m.typography("body-medium");
+    @include m.shape("extra-small");
+
+    position: fixed;
+    z-index: f.get-z-index("menu");
+    min-width: 112px;
+    max-width: 280px;
+    padding: 8px 0; // Keep padding consistent
+    background-color: t.color("surface-container");
+    color: t.color("on-surface");
+    @include m.elevation(2);
+    overflow: hidden;
+
+    // Initial state - hidden with proper transform origin
+    display: flex;
+    flex-direction: column;
+    opacity: 0;
+    transform-origin: top center;
+    // The menu grows in height from its anchor when it opens, and closing is
+    // the same motion in reverse: the closed state is the height it opens
+    // from, on the same duration and curve
+    transform: scaleY(0);
+    pointer-events: none;
+    // Closed, the menu is out of the tab order and the accessibility tree: an
+    // <m-menu> keeps its closed menu in its shadow root, where its first item
+    // was a tab stop. A transition keeps it visible while it moves either way.
+    visibility: hidden;
+
+    // Material Design 3 standard animation curve for menus
+    transition:
+        transform v.motion("duration-medium1") v.motion("easing-emphasized"),
+        opacity v.motion("duration-medium1") v.motion("easing-emphasized"),
+        visibility v.motion("duration-medium1");
+
+    // A top-layer menu is a popover (`layer: "top"`). The browser's popover
+    // defaults centre it in the viewport inside a border; the menu places
+    // itself, so they are cleared.
+    &[popover] {
+        inset: auto;
+        margin: 0;
+        border: 0;
+    }
+
+    // Visible state
+    &--visible {
+        opacity: 1;
+        transform: scaleY(1);
+        pointer-events: auto;
+        visibility: visible;
+    }
+
+    // Position variations with appropriate transform origins
+    &--position-top,
+    &--position-top-start,
+    &--position-top-end {
+        transform-origin: bottom center;
+    }
+
+    // Submenu styling
+    &--submenu {
+        position: absolute;
+        z-index: f.get-z-index("menu") + 1;
+    }
+
+    // A run of items between gaps. The element is presentational: it exists so
+    // a gap can split the menu into separate surfaces in the vertical variant.
+    // A standard menu is one surface, so here a group is only spacing.
+    &__group {
+        display: block;
+        list-style: none;
+
+        > ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        + .#{$component}__group {
+            margin-top: 8px;
+        }
+    }
+
+    // List container
+    &__list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        overflow-y: auto;
+        flex: 1 1 auto;
+        min-height: 0; // Required for flex children with overflow
+        @include m.scrollbar;
+        width: 100%;
+    }
+
+    // Menu items
+    &__item {
+        @include m.typography("label-large");
+        @include m.flex-row;
+
+        position: relative;
+        min-height: 48px;
+        // 12dp each side (m3.material.io menu specs, "Measurements"), with
+        // room at the end for a trailing mark
+        padding: 12px;
+        padding-inline-end: 40px;
+        cursor: pointer;
+        user-select: none;
+        color: t.color("on-surface");
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 100%;
+        box-sizing: border-box;
+
+        // State layer effects
+        &:hover {
+            @include m.state-layer(t.color("on-surface"), "hover");
+        }
+
+        // The focus layer is for a person navigating by key. Focus moves into
+        // the menu however it was opened, so keying this off `:focus` marked
+        // the first item as soon as the menu appeared under the pointer, which
+        // reads as a highlight nobody asked for.
+        &:focus {
+            outline: none;
+        }
+
+        &:focus-visible,
+            &--active {
+            @include m.state-layer(t.color("on-surface"), "focus");
+        }
+
+        &:active {
+            @include m.state-layer(t.color("on-surface"), "pressed");
+        }
+
+        // Submenu indicator
+        &--submenu {
+            padding-right: 48px;
+
+            &::after {
+                content: "";
+                position: absolute;
+                right: 12px;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 24px;
+                height: 24px;
+                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E")
+                    center / contain no-repeat;
+                -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E")
+                    center / contain no-repeat;
+                background-color: currentColor;
+                opacity: 0.87;
+            }
+
+            &[aria-expanded="true"] {
+                @include m.state-layer(t.color("on-surface"), "hover");
+
+                &::after {
+                    opacity: 1;
+                }
+            }
+        }
+
+        // Disabled: it can be focused and read, it just cannot be chosen
+        // (m3.material.io menu accessibility, "Interactability")
+        &--disabled {
+            cursor: default;
+            color: t.alpha("on-surface", 0.38);
+
+            &:hover,
+            &:active {
+                &::before {
+                    opacity: 0;
+                }
+            }
+        }
+
+        // Selected state for select component
+        // Selected: a secondary-container behind it and its own label colour
+        // (MenuTokens.ListItemSelectedContainerColor and
+        // ListItemSelectedLabelTextColor). The check is the second cue the
+        // accessibility guidance asks for on top of colour.
+        &--selected {
+            background-color: t.color("secondary-container");
+            color: t.color("on-secondary-container");
+
+            &:hover {
+                @include m.state-layer(t.color("on-secondary-container"), "hover");
+            }
+
+            &:focus-visible,
+            &.#{$component}__item--active {
+                @include m.state-layer(t.color("on-secondary-container"), "focus");
+            }
+
+            &:active {
+                @include m.state-layer(t.color("on-secondary-container"), "pressed");
+            }
+
+            .#{$component}__item-icon,
+            .#{$component}__item-shortcut {
+                color: inherit;
+            }
+
+            &::after {
+                content: "";
+                position: absolute;
+                right: 12px;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 18px;
+                height: 18px;
+                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E")
+                    center / contain no-repeat;
+                -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E")
+                    center / contain no-repeat;
+                background-color: currentColor;
+            }
+        }
+
+        // Content containers inside menu items
+        &-content {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            overflow: hidden;
+        }
+
+        &-icon {
+            margin-inline-end: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            color: t.color("on-surface-variant");
+
+            svg {
+                width: 24px;
+                height: 24px;
+            }
+        }
+
+        &-text {
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        // A label with a line under it. The stacking belongs to every
+        // variant, so a supporting line never runs into its label; the
+        // vertical menu adds its own type and colour on top.
+        &-label {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            flex: 1;
+            min-width: 0;
+        }
+
+        &-supporting {
+            @include m.typography("body-medium");
+            color: t.color("on-surface-variant");
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &-shortcut {
+            margin-left: 12px;
+            color: t.color("on-surface-variant");
+            flex-shrink: 0;
+        }
+    }
+
+    // Divider
+    &__divider {
+        height: 1px;
+        // The list is a flex column: in a menu that scrolls, a divider that
+        // may shrink is the one item without a minimum, and collapses to 0
+        // (FLO-273)
+        flex-shrink: 0;
+        margin: 8px 0;
+        background-color: t.color("outline-variant");
+    }
+
+    // Accessibility
+    @include m.focus-ring(".#{$component}__item:focus-visible");
+
+    // Reduced motion preference support
+    @include m.reduced-motion {
+        transition: opacity v.motion("duration-short2") linear, visibility v.motion("duration-short2");
+
+        &,
+        &--visible {
+            transform: none;
+        }
+    }
+
+    // High contrast mode
+    @include m.high-contrast {
+        border: 1px solid CurrentColor;
+
+        .#{$component}__divider {
+            background-color: CurrentColor;
+        }
+
+        .#{$component}__item--disabled {
+            opacity: 1;
+            color: GrayText;
+        }
+    }
+
+    // Dense variant — compact items for toolbars and dense UIs
+    &--dense {
+        padding: 4px 0;
+
+        .#{$component}__item {
+            @include m.typography("body-medium");
+            min-height: 32px;
+            padding: 4px 12px;
+            padding-right: 32px;
+
+            &--submenu {
+                padding-right: 36px;
+            }
+
+            &-icon svg {
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        .#{$component}__divider {
+            margin: 4px 0;
+        }
+    }
+
+    // RTL Support
+    // -------------------------------------------------------------------------
+    // The M3 expressive vertical menu (Compose SegmentedMenuTokens and
+    // StandardMenuTokens / VibrantMenuTokens). A 16dp container holding 44dp
+    // items 2dp apart; an item is a 4dp rectangle at rest and rounds to 12dp
+    // as it is hovered, focused, pressed or selected, which is the expressive
+    // state this variant is for. The first and last items round to 12dp on
+    // their outer corners so the column reads as one block.
+    // -------------------------------------------------------------------------
+    &--vertical {
+        // Standard: surface-based, the lower-emphasis mapping
+        --#{$prefix}-menu-container: #{t.color("surface-container-low")};
+        --#{$prefix}-menu-label: #{t.color("on-surface")};
+        --#{$prefix}-menu-supporting: #{t.color("on-surface-variant")};
+        --#{$prefix}-menu-selected-container: #{t.color("tertiary-container")};
+        --#{$prefix}-menu-selected-label: #{t.color("on-tertiary-container")};
+
+        border-radius: v.shape("large");
+        background-color: var(--#{$prefix}-menu-container);
+        color: var(--#{$prefix}-menu-label);
+        // GroupPadding. The vertical menu has no container spacing token of
+        // its own: it is made of groups, and a menu with no gaps is one group,
+        // so the container's inset is the group's. The 8dp that was here is
+        // the horizontal variant's ContainerTopSpace, which does not apply.
+        padding: 4px;
+
+        // Vibrant: tertiary-based, more prominent, to be used sparingly
+        &.#{$component}--vibrant {
+            --#{$prefix}-menu-container: #{t.color("tertiary-container")};
+            --#{$prefix}-menu-label: #{t.color("on-tertiary-container")};
+            --#{$prefix}-menu-supporting: #{t.color("on-tertiary-container")};
+            --#{$prefix}-menu-selected-container: #{t.color("tertiary")};
+            --#{$prefix}-menu-selected-label: #{t.color("on-tertiary")};
+        }
+
+        .#{$component}__list {
+            display: flex;
+            flex-direction: column;
+            gap: 2px; // SegmentedGap
+        }
+
+        .#{$component}__item {
+            @include m.typography("body-large");
+            min-height: 44px; // SegmentedMenuTokens.Item
+            padding: 8px 16px; // ItemTopSpace / ItemLeadingSpace
+            padding-inline-end: 16px;
+            color: var(--#{$prefix}-menu-label);
+            border-radius: v.shape("extra-small"); // ItemShape
+            transition:
+                border-radius v.motion("spring-fast-spatial-duration")
+                    v.motion("spring-fast-spatial-easing"),
+                background-color v.motion("duration-short2")
+                    v.motion("easing-standard");
+
+            // The shape is the state: 4dp at rest, 12dp once it is touched
+            &:hover,
+            &:focus-visible,
+            &--active,
+            &:active {
+                border-radius: v.shape("medium");
+            }
+
+            // The ends of the column round outwards, so the items read as one
+            &:first-child {
+                border-start-start-radius: v.shape("medium");
+                border-start-end-radius: v.shape("medium");
+            }
+
+            &:last-child {
+                border-end-start-radius: v.shape("medium");
+                border-end-end-radius: v.shape("medium");
+            }
+
+            &--selected {
+                background-color: var(--#{$prefix}-menu-selected-container);
+                color: var(--#{$prefix}-menu-selected-label);
+                border-radius: v.shape("medium"); // ItemSelectedShape
+
+                &:hover {
+                    @include m.state-layer(var(--#{$prefix}-menu-selected-label), "hover");
+                }
+
+                &:focus-visible,
+            &.#{$component}__item--active {
+                    @include m.state-layer(var(--#{$prefix}-menu-selected-label), "focus");
+                }
+
+                &:active {
+                    @include m.state-layer(var(--#{$prefix}-menu-selected-label), "pressed");
+                }
+            }
+
+            &--disabled {
+                color: color-mix(in srgb, var(--#{$prefix}-menu-label) 38%, transparent);
+            }
+
+            &-icon {
+                color: var(--#{$prefix}-menu-supporting);
+                margin-inline-end: 12px; // ItemBetweenSpace
+
+                svg {
+                    // ItemLeadingIconSize / ItemTrailingIconSize
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+
+            &-shortcut {
+                @include m.typography("label-small"); // ItemTrailingSupportingTextFont
+                color: var(--#{$prefix}-menu-supporting);
+            }
+
+            // A label with a line under it
+            &-label {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                flex: 1;
+                min-width: 0;
+            }
+
+            &-supporting {
+                @include m.typography("body-medium"); // ItemSupportingTextFont
+                color: var(--#{$prefix}-menu-supporting);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            &--selected {
+                .#{$component}__item-icon,
+                .#{$component}__item-shortcut,
+                .#{$component}__item-supporting {
+                    color: inherit;
+                }
+            }
+        }
+
+        // A grouped menu separates its runs of items two ways, as the spec
+        // shows: a divider line across one surface, or a gap
+        // (m3.material.io menu guidelines, "Gaps & dividers")
+        .#{$component}__divider {
+            margin: 6px 0;
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // The gap separator: the menu stops being one surface and each group
+    // becomes its own, keeping the container's shape and elevation.
+    //
+    // The measurements come from the vertical menu specimen on
+    // m3.material.io/components/menus, which the guidelines show but do not
+    // give numbers for. Read off that image at its 2px-per-dp scale: a 44dp
+    // item, a 16dp group corner, 4dp of padding inside each group and 2dp
+    // between them, so two items either side of a boundary sit 10dp apart.
+    // The group hugs its items more tightly than the whole-menu container
+    // does, which is what keeps a gap from reading as a chasm.
+    // -------------------------------------------------------------------------
+    &--vertical:has(.#{$component}__group) {
+        background-color: transparent;
+        box-shadow: none;
+        padding: 0;
+
+        // Each group casts its own shadow. The container clips so that item
+        // backgrounds stay inside its rounded corners, but there is no
+        // container here to stay inside, and clipping would cut the shadows
+        // off square.
+        overflow: visible;
+
+        .#{$component}__list {
+            overflow: visible;
+            // the separator is the 2dp the variant already puts between items
+            gap: 2px;
+        }
+
+        .#{$component}__group {
+            background-color: var(--#{$prefix}-menu-container);
+            padding: 4px; // GroupPadding
+            @include m.elevation(2);
+
+            // A corner facing a gap is the group's own shape, 8dp
+            // (SegmentedMenuTokens.GroupShape). Only the outside of the menu
+            // keeps the 16dp container shape, so the run of groups reads as
+            // one menu that has been cut, rather than as loose cards.
+            border-radius: v.shape("small");
+
+            &:first-child {
+                border-start-start-radius: v.shape("large"); // ContainerShape
+                border-start-end-radius: v.shape("large");
+            }
+
+            &:last-child {
+                border-end-start-radius: v.shape("large");
+                border-end-end-radius: v.shape("large");
+            }
+
+            // its own margin would add to the list gap
+            + .#{$component}__group {
+                margin-top: 0;
+            }
+
+            // and the items inside keep the 2dp separation of the variant
+            > ul {
+                display: flex;
+                flex-direction: column;
+                gap: 2px;
+            }
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Shape morph on the container: while a submenu is open, the menu that
+    // opened it steps back to an 8dp corner and the active one takes 24dp
+    // (SegmentedMenuTokens.ActiveContainerShape and InactiveContainerShape).
+    // This is the expressive active state the spec describes.
+    // -------------------------------------------------------------------------
+    &--vertical {
+        transition:
+            transform v.motion("duration-medium1") v.motion("easing-emphasized"),
+            opacity v.motion("duration-medium1") v.motion("easing-emphasized"),
+            visibility v.motion("duration-medium1"),
+            border-radius v.motion("spring-fast-spatial-duration")
+                v.motion("spring-fast-spatial-easing");
+
+        &.#{$component}--active {
+            border-radius: 24px;
+        }
+
+        &.#{$component}--inactive {
+            border-radius: v.shape("small");
+        }
+    }
+
+    @include m.rtl {
+        transform-origin: top right;
+
+        &--position-top,
+        &--position-top-start,
+        &--position-top-end {
+            transform-origin: bottom right;
+        }
+
+        .#{$component}__item {
+            &--submenu {
+                padding-right: 16px;
+                padding-left: 48px;
+
+                &::after {
+                    right: auto;
+                    left: 16px;
+                    transform: translateY(-50%) rotate(180deg);
+                }
+            }
+        }
+    }
+}