|
11 | 11 | --wp-ui-menu-min-width: 160px; |
12 | 12 | --wp-ui-menu-max-width: var(--wpds-dimension-surface-width-md); |
13 | 13 | --wp-ui-menu-item-padding-inline: var(--wpds-dimension-padding-md); |
14 | | - --wp-ui-menu-group-head-padding-inline: var(--wpds-dimension-padding-md); |
| 14 | + --_wp-ui-menu-group-head-padding-base: var(--wpds-dimension-padding-md); |
| 15 | + --wp-ui-menu-group-head-padding-inline: var(--_wp-ui-menu-group-head-padding-base); |
15 | 16 | --wp-ui-menu-selection-indicator-track-size: 0px; |
16 | 17 | --wp-ui-menu-selection-indicator-size: var(--wpds-dimension-size-sm); |
17 | 18 | --wp-ui-menu-selection-indicator-gap: 0px; |
|
57 | 58 | /* |
58 | 59 | * The list is the implicit alignment group for direct items. Explicit |
59 | 60 | * groups and radio groups each establish an independent prefix track while |
60 | | - * inheriting the menu-wide selection tracks. |
| 61 | + * inheriting the menu-wide selection tracks. Group labels and separators |
| 62 | + * follow that shared selection track so they line up with item labels. |
61 | 63 | */ |
62 | 64 | .list, |
63 | 65 | .group, |
|
88 | 90 | --wp-ui-menu-group-prefix-gap: var(--wpds-dimension-gap-xs); |
89 | 91 | } |
90 | 92 |
|
| 93 | + /* |
| 94 | + * Start after the selection track (`prefix-start`) and stop before the |
| 95 | + * trailing item padding (`content-end`). A zero-width prefix track keeps |
| 96 | + * this on the label line; a real prefix stays in its own column so one |
| 97 | + * group's icons do not shift every heading and divider. |
| 98 | + * `--wp-ui-menu-group-head-padding-inline` still nudges both edges. Its |
| 99 | + * default matches the item padding the grid already applies. |
| 100 | + */ |
91 | 101 | .group-label { |
92 | | - grid-column: 1 / -1; |
| 102 | + grid-column: prefix-start / content-end; |
93 | 103 | display: flex; |
94 | 104 | align-items: center; |
| 105 | + min-width: 0; |
95 | 106 | min-height: var(--wpds-dimension-size-md); |
96 | 107 | padding-block: var(--wpds-dimension-padding-xs); |
97 | | - padding-inline: var(--wp-ui-menu-group-head-padding-inline); |
| 108 | + margin-inline: calc(var(--wp-ui-menu-group-head-padding-inline) - var(--_wp-ui-menu-group-head-padding-base)); |
98 | 109 | font-family: var(--wpds-typography-font-family-body); |
99 | 110 | font-size: var(--wpds-typography-font-size-xs); |
100 | 111 | font-weight: var(--wpds-typography-font-weight-emphasis); |
|
104 | 115 | } |
105 | 116 |
|
106 | 117 | .separator { |
107 | | - grid-column: 1 / -1; |
| 118 | + grid-column: prefix-start / content-end; |
108 | 119 | height: var(--wpds-border-width-xs); |
109 | 120 | margin-block: var(--wpds-dimension-gap-xs); |
110 | | - margin-inline: var(--wp-ui-menu-group-head-padding-inline); |
| 121 | + margin-inline: calc(var(--wp-ui-menu-group-head-padding-inline) - var(--_wp-ui-menu-group-head-padding-base)); |
111 | 122 | background-color: var(--wpds-color-stroke-surface-neutral-weak); |
112 | 123 |
|
113 | 124 | @media ( forced-colors: active ) { |
|
0 commit comments