What problem does this feature solve?
The sidebar family (six-sidebar, six-sidebar-item, six-sidebar-item-group) has no separator, so the only way to divide groups of navigation items is to reuse six-menu-divider. That component is designed for six-menu and does not render correctly inside a sidebar: when placed in a six-sidebar-item-group, the group's ::part(content) applies a left padding (and no right padding) to its slotted children, so the divider line is indented on the left and flush on the right instead of spanning the full width. six-menu-divider exposes no part or custom property to escape that inset, so consumers have to reach in with a negative-margin hack that depends on an internal !important padding value. It also uses --six-menu-divider-color rather than a sidebar token.
What does the proposed API look like?
A dedicated separator that owns its own spacing and renders full width inside a sidebar or group:
<six-sidebar>
<six-sidebar-item>Dashboard</six-sidebar-item>
<six-sidebar-separator></six-sidebar-separator>
<six-sidebar-item-group name="Maintenance">
<six-sidebar-item>Subjects</six-sidebar-item>
<six-sidebar-separator></six-sidebar-separator>
<six-sidebar-item>Email templates</six-sidebar-item>
</six-sidebar-item-group>
</six-sidebar>It would span the full content width regardless of the surrounding ::part(content) padding, use a sidebar color token, and expose ::part(base) for styling. Alternatively, six-sidebar-item-group could neutralise its left content padding for slotted six-menu-divider children and document that as the supported approach.
What problem does this feature solve?
The sidebar family (
six-sidebar,six-sidebar-item,six-sidebar-item-group) has no separator, so the only way to divide groups of navigation items is to reusesix-menu-divider. That component is designed forsix-menuand does not render correctly inside a sidebar: when placed in asix-sidebar-item-group, the group's::part(content)applies a left padding (and no right padding) to its slotted children, so the divider line is indented on the left and flush on the right instead of spanning the full width.six-menu-dividerexposes no part or custom property to escape that inset, so consumers have to reach in with a negative-margin hack that depends on an internal!importantpadding value. It also uses--six-menu-divider-colorrather than a sidebar token.What does the proposed API look like?
A dedicated separator that owns its own spacing and renders full width inside a sidebar or group:
It would span the full content width regardless of the surrounding
::part(content)padding, use a sidebar color token, and expose::part(base)for styling. Alternatively,six-sidebar-item-groupcould neutralise its left content padding for slottedsix-menu-dividerchildren and document that as the supported approach.