feat(context-menu): adiciona estilos do componente po-context-menu

[anderson-gregorio-totvs]

feat(context-menu): adiciona estilos do componente po-context-menu

Summary

Adds CSS styles and theme tokens for the new po-context-menu sidebar component. The component provides contextual navigation inspired by po-menu, with expand/collapse states, header (context title + title), scrollable item list, and selected/hover/focus/pressed states.

New files:

• src/css/components/po-context-menu/po-context-menu.css — all component styles (container, header, toggle button, list items, label truncation, selection indicator)
• src/css/components/po-context-menu/index.css — barrel import

Modified files:

• src/css/components/index.css — registers the new component
• src/css/themes/po-theme-default.css — adds CSS custom property tokens for po-context-menu
• src/css/commons/po-common.css — adds .po-context-menu-wrapper layout utility

Review & Testing Checklist for Human

• CRITICAL — This branch contains many unrelated changes. The diff includes: version bump to 21.6.0, CHANGELOG update, new po-skeleton component, global token additions (--duration-very-slow, --duration-ultra-slow), and a sweeping refactor replacing [data-a11y='AAA'] selectors with [p-size='small'] attribute selectors across po-button, po-dropdown, po-field, po-menu, po-modal, po-tabs, po-upload, po-toaster, po-calendar, po-table, po-stepper, po-popover, po-popup, and more. These are NOT part of the context-menu feature and should be reviewed/split separately to avoid shipping unintended breaking changes.
• Hardcoded values in po-context-menu.css: width: 256px / 56px (lines 15, 19), font-size: 1.5rem (line 43), gap: 1em (line 115), transition: all 0.35s ease-in-out (line 129). These were flagged in code review but not tokenized. Verify if these should use CSS custom properties for theme customizability.
• .po-context-menu-wrapper > *:nth-child(2) selector in po-common.css applies width: 100% to the second child. This is a broad selector — confirm it doesn't cause layout issues when po-context-menu is used alongside components other than po-page-default.
• Visual verification required: Build the styles (npm run build) and test in a live application with the Angular component from feat(context-menu): implementa po-context-menu, adiciona activatedTab/focusTab ao po-tabs po-angular#2780:
  • Verify expanded (256px) and collapsed (56px) widths render correctly
  • Test all states: hover, focus (outline), pressed, selected (left border indicator)
  • Confirm label truncation with text-overflow: ellipsis and 2-line clamp works
  • Check toggle button icon alignment and sizing
  • Verify header padding/spacing for context title and title when expanded vs collapsed
  • Ensure no visual regressions in other components due to common style changes

Notes

• This PR should ideally contain only the po-context-menu styles. The skeleton component, a11y refactor, and version/changelog updates appear to be from a different feature branch and should be split into separate PRs.
• Session: https://totvs.devinenterprise.com/sessions/00c60bac99f14fa8b48672f9d4202754
• Requested by: @anderson-gregorio-totvs

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

Devin Review found 1 potential issue.

View 3 additional findings in Devin Review.

[devin-ai-integration]

🔴 width: 100% on flex child causes context menu sidebar to shrink from its intended fixed width

.po-context-menu-wrapper uses display: flex (po-common.css:161) and its second child is given width: 100% (po-common.css:165). The .po-context-menu element (intended as the first child) has a fixed width: 256px (po-context-menu.css:15) but does not set flex-shrink: 0. In a flex context, width acts as the flex basis, so the total requested width is 256px + 100% of the container, creating overflow. Both children default to flex-shrink: 1, so the browser shrinks both proportionally — the context menu loses its designed 256px width (e.g., ~211px on a 1200px container). The idiomatic fix is to use flex: 1; min-width: 0; on the second child, which means "fill remaining space" rather than "be 100% of parent width," allowing the first child to keep its fixed size.

Suggested change

	.po-context-menu-wrapper > *:nth-child(2) {
	width: 100%;
	}
	.po-context-menu-wrapper > *:nth-child(2) {
	flex: 1;
	min-width: 0;
	}

---

Was this helpful? React with 👍 or 👎 to provide feedback.