@sarjallab09/figma-intelligence 1.0.0

package/figma-intelligence-layer/src/tools/phase5-governance/component-spec/knowledge/divider.ts

@@ -0,0 +1,223 @@
+/**
+ * divider.ts — Gold-standard design knowledge for Divider components
+ */
+import type { ComponentKnowledge } from "../types.js";
+
+export const dividerKnowledge: ComponentKnowledge = {
+  description:
+    "Horizontal or vertical separator line | Visually divides content sections | Supports solid, dashed, and labeled variants",
+
+  stateSpecifications: [
+    {
+      state: "Default",
+      visualChange: "A thin line rendered in the divider color token; no interactive feedback",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "Standard resting state — divider is a non-interactive decorative or semantic separator",
+    },
+    {
+      state: "With Label",
+      visualChange: "Line is split into two segments with centered text label between them; label has a background fill matching the surface",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "Divider carries a textual label such as 'OR', 'Section Title', or a date grouping",
+    },
+    {
+      state: "Decorative",
+      visualChange: "Identical to default visually; marked as aria-hidden for assistive technologies",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "Divider is purely visual — it does not represent a semantic content boundary",
+    },
+  ],
+
+  propertyDescriptions: {
+    orientation: "Direction of the divider line — 'horizontal' (default, full-width) or 'vertical' (full-height, used in toolbars and inline layouts)",
+    type: "Line style — 'solid' (continuous line) or 'dashed' (dashed/dotted pattern)",
+    spacing: "Vertical margin (horizontal divider) or horizontal margin (vertical divider) applied above and below/left and right; uses spacing tokens",
+    label: "Optional centered text rendered in the middle of the divider line; splits the line into two segments",
+    inset: "When true, the divider is indented from the start edge (e.g. aligned with content in a list, not full-width)",
+    decorative: "When true, the divider has aria-hidden='true' and is not announced by screen readers; when false, uses role='separator'",
+    color: "Override token for the divider line color; defaults to $divider-color",
+    thickness: "Line thickness in pixels; defaults to 1px; 2px for emphasis dividers",
+  },
+
+  sizeSpecifications: [
+    {
+      size: "Default",
+      height: "1px (horizontal) / 100% (vertical)",
+      paddingLR: "0px",
+      fontSize: "12px (label only)",
+      iconSize: "N/A",
+      borderRadius: "0px",
+    },
+    {
+      size: "Thick",
+      height: "2px (horizontal) / 100% (vertical)",
+      paddingLR: "0px",
+      fontSize: "12px (label only)",
+      iconSize: "N/A",
+      borderRadius: "0px",
+    },
+    {
+      size: "Inset",
+      height: "1px",
+      paddingLR: "16px start inset",
+      fontSize: "12px (label only)",
+      iconSize: "N/A",
+      borderRadius: "0px",
+    },
+  ],
+
+  designTokenBindings: [
+    {
+      property: "Line Color",
+      tokenName: "$divider-color",
+      role: "Default color for the divider line",
+      fallback: "#E4E7EC",
+    },
+    {
+      property: "Line Color Subtle",
+      tokenName: "$divider-color-subtle",
+      role: "Lighter divider for less prominent separation",
+      fallback: "#F2F4F7",
+    },
+    {
+      property: "Line Color Strong",
+      tokenName: "$divider-color-strong",
+      role: "Darker divider for high-emphasis separation",
+      fallback: "#D0D5DD",
+    },
+    {
+      property: "Label Text Color",
+      tokenName: "$divider-label-text",
+      role: "Text color for the optional centered label",
+      fallback: "#667085",
+    },
+    {
+      property: "Label Background",
+      tokenName: "$divider-label-bg",
+      role: "Background behind the label to mask the line; should match the surface color",
+      fallback: "#FFFFFF",
+    },
+    {
+      property: "Label Font Family",
+      tokenName: "$font-family-sans",
+      role: "Typeface for the optional label text",
+      fallback: "Inter, system-ui, sans-serif",
+    },
+    {
+      property: "Spacing Default",
+      tokenName: "$spacing-md",
+      role: "Default margin above and below a horizontal divider",
+      fallback: "16px",
+    },
+    {
+      property: "Spacing Compact",
+      tokenName: "$spacing-sm",
+      role: "Reduced spacing for compact layouts",
+      fallback: "8px",
+    },
+    {
+      property: "Spacing Spacious",
+      tokenName: "$spacing-lg",
+      role: "Increased spacing for major section breaks",
+      fallback: "24px",
+    },
+  ],
+
+  structureRules: [
+    "Horizontal divider is a full-width block element with a fixed height (1px or 2px) and background-color fill",
+    "Vertical divider is an inline or flex-item element with a fixed width (1px or 2px) and auto height matching its container",
+    "Label variant uses a horizontal Auto Layout with the line as two flex-grow segments and the label centered between them",
+    "Label text has horizontal padding ($spacing-sm) and a background fill matching the surface to create the visual gap effect",
+    "Inset divider has a start margin (margin-left in LTR) matching the content indentation of adjacent list items",
+    "Divider does not have any interactive areas — it is a purely visual or semantic element",
+    "In Figma, divider is a 1px-height frame with fill-container width; vertical variant is a 1px-width frame with fill-container height",
+    "Dashed variant uses CSS border-style:dashed or SVG stroke-dasharray for the line pattern",
+  ],
+
+  typeHierarchyRules: [
+    "Label text uses Caption size (12px) with Regular (400) weight for subtlety",
+    "Label text uses uppercase or sentence case depending on context — uppercase for 'OR' separators, sentence case for section titles",
+    "Label text color should be de-emphasized (secondary/muted) to avoid competing with surrounding content",
+    "Label text should never wrap — keep labels short (1-3 words maximum)",
+  ],
+
+  interactionRules: [
+    { event: "None", trigger: "N/A", action: "Dividers are non-interactive — no hover, click, focus, or keyboard events apply" },
+    { event: "Resize", trigger: "Parent container width/height changes", action: "Horizontal divider stretches to fill container width; vertical divider stretches to fill container height" },
+    { event: "Theme Change", trigger: "Light/dark mode toggle", action: "Divider color updates to the resolved value of the $divider-color token for the new theme" },
+  ],
+
+  contentGuidance: [
+    "Use dividers sparingly — whitespace alone is often sufficient to separate content sections",
+    "Horizontal dividers are ideal between list items, form groups, or major content sections",
+    "Vertical dividers work well in toolbars, header navigation, and inline element groups",
+    "Labeled dividers are useful for 'OR' separators in forms (e.g. between sign-in methods), date groupings in feeds, or section headers in settings",
+    "Inset dividers should align with the start of text content in lists, not the leading icon/avatar",
+    "Do not use dividers inside cards — the card boundary itself provides sufficient separation",
+    "Use the subtle color variant when the divider should be barely visible (e.g. within dense data tables)",
+  ],
+
+  responsiveBehaviour: [
+    { breakpoint: "Mobile (<768px)", behavior: "Full-width horizontal dividers; inset value may reduce; vertical dividers in toolbars remain" },
+    { breakpoint: "Tablet (768-1023px)", behavior: "Standard behavior; spacing tokens apply as specified" },
+    { breakpoint: "Desktop (1024-1439px)", behavior: "Standard behavior; dividers respect container max-width constraints" },
+    { breakpoint: "Ultra-wide (>=1440px)", behavior: "Dividers remain within content max-width; do not stretch to full viewport width" },
+  ],
+
+  accessibilitySpec: {
+    intro:
+      "Dividers can be semantic (representing a thematic content break) or decorative (purely visual). The correct ARIA treatment depends on the divider's purpose in context.",
+    requirements: [
+      { requirement: "Semantic Role", level: "A", notes: "Semantic dividers must use <hr> element or role='separator' to announce a content boundary to screen readers" },
+      { requirement: "Decorative Hiding", level: "A", notes: "Decorative dividers must have aria-hidden='true' so they are invisible to assistive technologies" },
+      { requirement: "Orientation", level: "A", notes: "Vertical separators must have aria-orientation='vertical' when using role='separator'" },
+      { requirement: "Label Accessibility", level: "A", notes: "Labeled dividers should associate the label text with the separator via aria-label or visible text" },
+      { requirement: "Contrast Ratio", level: "AA", notes: "Divider line must have at least 3:1 contrast against the adjacent surface (WCAG 1.4.11 non-text contrast)" },
+      { requirement: "Not Focusable", level: "A", notes: "Dividers must not be in the tab order — they are not interactive elements" },
+    ],
+    outro: [
+      "When a divider is used between sections of a page, the <hr> element is preferred as it provides native semantics without ARIA",
+      "Decorative dividers within a list should be treated as presentational and excluded from the list item count",
+      "Test with screen readers to ensure decorative dividers are truly invisible and semantic ones are announced as 'separator'",
+    ],
+  },
+
+  qaAcceptanceCriteria: [
+    { check: "Visual Regression", platform: "All", expectedResult: "Divider renders at correct thickness, color, and spacing for each variant" },
+    { check: "Horizontal Full-width", platform: "All", expectedResult: "Line spans the full container width; no gaps or overflow" },
+    { check: "Vertical Full-height", platform: "All", expectedResult: "Line spans the full container height in flex layouts; no collapse to 0px" },
+    { check: "Inset Alignment", platform: "All", expectedResult: "Inset divider aligns with text content, not leading icon/avatar" },
+    { check: "Label Rendering", platform: "All", expectedResult: "Label centered between two line segments; background masks the line behind the text" },
+    { check: "Dashed Style", platform: "All", expectedResult: "Dashed pattern renders consistently across browsers; dash length and gap are uniform" },
+    { check: "Spacing Tokens", platform: "All", expectedResult: "Margin above and below matches the specified spacing token value" },
+    { check: "Theme Switching", platform: "Web", expectedResult: "Divider color updates correctly when switching between light and dark themes" },
+    { check: "Semantic Role", platform: "Web", expectedResult: "Semantic dividers have <hr> or role='separator'; decorative ones have aria-hidden='true'" },
+    { check: "Screen Reader", platform: "Web", expectedResult: "Semantic dividers announced as 'separator'; decorative dividers not announced" },
+    { check: "Not Focusable", platform: "Web", expectedResult: "Divider is not reachable via Tab key navigation" },
+    { check: "Contrast", platform: "All", expectedResult: "Divider line passes 3:1 non-text contrast against adjacent surfaces" },
+    { check: "RTL Support", platform: "Web", expectedResult: "Inset direction mirrors; label position remains centered; no layout issues" },
+  ],
+
+  dos: [
+    "Use horizontal dividers to create clear visual separation between major content sections",
+    "Use the semantic <hr> element when the divider represents a thematic break in content",
+    "Use aria-hidden='true' for purely decorative dividers that have no semantic meaning",
+    "Match the inset value to the text indentation of adjacent content (e.g. list items with leading icons)",
+    "Use consistent spacing tokens above and below dividers throughout the application",
+    "Use the subtle color variant for dividers within dense or information-heavy layouts",
+    "Keep labeled dividers concise — one to three words maximum",
+  ],
+
+  donts: [
+    "Do not overuse dividers — whitespace and grouping often provide sufficient visual separation",
+    "Do not use dividers inside card components — the card border already provides a boundary",
+    "Do not use thick (2px+) dividers as a styling device — they should be used sparingly for emphasis only",
+    "Do not make dividers focusable or interactive — they are display-only elements",
+    "Do not use dividers as the sole means of grouping content — pair with headings or spacing for clarity",
+    "Do not change divider colors to brand colors unless the design system explicitly defines such tokens",
+    "Do not use full-width dividers when inset dividers would better align with the content structure",
+  ],
+};

package/figma-intelligence-layer/src/tools/phase5-governance/component-spec/knowledge/drawer.ts

@@ -0,0 +1,255 @@
+/**
+ * drawer.ts — Gold-standard design knowledge for Drawer (slide-in panel) components
+ */
+import type { ComponentKnowledge } from "../types.js";
+
+export const drawerKnowledge: ComponentKnowledge = {
+  description:
+    "Slide-in surface panel | Anchored to viewport edge | Secondary content or navigation container",
+
+  stateSpecifications: [
+    {
+      state: "Closed",
+      visualChange: "Drawer is fully off-screen; overlay is removed from the DOM or set to display:none",
+      opacity: "0",
+      cursorWeb: "default",
+      usage: "Default resting state — drawer content is not visible and does not block interaction",
+    },
+    {
+      state: "Opening",
+      visualChange: "Drawer slides in from the anchored edge with eased transition; overlay fades in simultaneously",
+      opacity: "0 → 1 (animated)",
+      cursorWeb: "default",
+      usage: "Transition state triggered by programmatic open call or user action",
+    },
+    {
+      state: "Open",
+      visualChange: "Drawer is fully visible at its target width/height; overlay covers remaining viewport area",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "Content is accessible and interactive; focus is trapped within the drawer",
+    },
+    {
+      state: "Closing",
+      visualChange: "Drawer slides out toward its anchored edge; overlay fades out simultaneously",
+      opacity: "1 → 0 (animated)",
+      cursorWeb: "default",
+      usage: "Transition state triggered by close button, Escape key, or overlay click",
+    },
+    {
+      state: "Focus-Within",
+      visualChange: "No visual change on the drawer itself; focus ring appears on the focused interactive element inside",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "An element inside the drawer receives keyboard focus via Tab navigation",
+    },
+  ],
+
+  propertyDescriptions: {
+    side: "Edge from which the drawer slides in — 'left', 'right', or 'bottom'; determines translate direction and anchor position",
+    size: "Width (for left/right) or height (for bottom) of the drawer panel — accepts 'small' (320px), 'medium' (480px), 'large' (640px), or custom pixel value",
+    title: "Heading text rendered in the drawer header; provides context for the panel content and is used as the accessible label",
+    showOverlay: "When true, a semi-transparent backdrop covers the viewport behind the drawer to indicate modal behavior",
+    closeOnOverlayClick: "When true, clicking the overlay backdrop closes the drawer; should be false for critical flows requiring explicit dismissal",
+    closeOnEscape: "When true, pressing the Escape key closes the drawer; standard UX expectation for modal-like surfaces",
+    open: "Controlled boolean that determines whether the drawer is visible; parent component manages this state",
+    onClose: "Callback invoked when the drawer requests closure via close button, Escape, or overlay click",
+    children: "React node or slot content rendered inside the drawer body area below the header",
+    footer: "Optional slot for action buttons (e.g. Save, Cancel) pinned to the bottom of the drawer",
+  },
+
+  sizeSpecifications: [
+    {
+      size: "Small",
+      height: "100vh",
+      paddingLR: "16px",
+      fontSize: "14px",
+      iconSize: "20px",
+      borderRadius: "0px",
+    },
+    {
+      size: "Medium",
+      height: "100vh",
+      paddingLR: "24px",
+      fontSize: "14px",
+      iconSize: "20px",
+      borderRadius: "0px",
+    },
+    {
+      size: "Large",
+      height: "100vh",
+      paddingLR: "32px",
+      fontSize: "14px",
+      iconSize: "20px",
+      borderRadius: "0px",
+    },
+    {
+      size: "Bottom Sheet",
+      height: "auto (max 80vh)",
+      paddingLR: "24px",
+      fontSize: "14px",
+      iconSize: "20px",
+      borderRadius: "12px 12px 0 0",
+    },
+  ],
+
+  designTokenBindings: [
+    {
+      property: "Background",
+      tokenName: "$drawer-surface-bg",
+      role: "Drawer panel background color",
+      fallback: "#FFFFFF",
+    },
+    {
+      property: "Overlay",
+      tokenName: "$overlay-bg",
+      role: "Semi-transparent backdrop behind the drawer",
+      fallback: "rgba(0, 0, 0, 0.5)",
+    },
+    {
+      property: "Header Text",
+      tokenName: "$drawer-title-color",
+      role: "Title text color in the drawer header",
+      fallback: "#101828",
+    },
+    {
+      property: "Border",
+      tokenName: "$drawer-border",
+      role: "Subtle border on the leading edge opposite to the anchor side",
+      fallback: "#E4E7EC",
+    },
+    {
+      property: "Shadow",
+      tokenName: "$shadow-drawer",
+      role: "Elevation shadow cast by the drawer panel onto the page content",
+      fallback: "-4px 0 24px rgba(0, 0, 0, 0.12)",
+    },
+    {
+      property: "Close Icon",
+      tokenName: "$icon-secondary",
+      role: "Color of the close (X) button icon in the header",
+      fallback: "#667085",
+    },
+    {
+      property: "Transition Duration",
+      tokenName: "$transition-drawer",
+      role: "Slide animation duration for open and close",
+      fallback: "300ms ease-in-out",
+    },
+    {
+      property: "Focus Ring",
+      tokenName: "$focus-ring",
+      role: "Keyboard focus indicator for interactive elements inside the drawer",
+      fallback: "0 0 0 2px #FFFFFF, 0 0 0 4px #2E90FA",
+    },
+    {
+      property: "Z-Index",
+      tokenName: "$z-drawer",
+      role: "Stacking order to ensure drawer sits above page content but below alerts",
+      fallback: "1000",
+    },
+  ],
+
+  structureRules: [
+    "Drawer is rendered as a fixed-position element anchored to the specified viewport edge",
+    "Container uses vertical Auto Layout: Header → Body (scrollable) → Footer (optional, pinned)",
+    "Header contains title text (left-aligned) and close button (right-aligned) in a horizontal row",
+    "Body area has overflow-y: auto to handle content taller than the viewport",
+    "Footer is sticky to the bottom and separated from the body by a subtle top border",
+    "Overlay is a sibling element rendered behind the drawer with position: fixed covering the full viewport",
+    "When side is 'bottom', the drawer anchors to the bottom edge and uses border-radius on top corners only",
+    "Drawer width for left/right should never exceed 90vw to prevent fully covering the trigger page",
+    "Scroll lock is applied to the document body when the drawer is open to prevent background scrolling",
+  ],
+
+  typeHierarchyRules: [
+    "Title uses heading level appropriate to page context (typically h2) with font-weight 600 (SemiBold)",
+    "Body text follows standard body typography — 14px/20px regular weight",
+    "Footer action buttons follow the standard button typography rules",
+    "Section headings within the drawer body use 12px uppercase labels or 14px SemiBold depending on DS",
+  ],
+
+  interactionRules: [
+    { event: "Open", trigger: "Programmatic call or trigger button click", action: "Drawer slides in from the anchored edge; overlay fades in; focus moves to the first focusable element or close button" },
+    { event: "Close (Button)", trigger: "Click/tap on close (X) button in header", action: "Drawer slides out; overlay fades out; focus returns to the element that triggered the drawer" },
+    { event: "Close (Escape)", trigger: "Escape key pressed while drawer is open", action: "If closeOnEscape is true, drawer closes and focus returns to trigger element" },
+    { event: "Close (Overlay)", trigger: "Click/tap on the overlay backdrop", action: "If closeOnOverlayClick is true, drawer closes and focus returns to trigger element" },
+    { event: "Tab Navigation", trigger: "Tab key while drawer is open", action: "Focus cycles through interactive elements inside the drawer — focus trap prevents escape to background" },
+    { event: "Swipe (Mobile)", trigger: "Horizontal swipe in the direction of the anchor edge", action: "Drawer begins closing if swipe distance exceeds threshold (50% of drawer width)" },
+    { event: "Scroll", trigger: "Scroll inside the drawer body", action: "Body content scrolls vertically; header and footer remain fixed" },
+  ],
+
+  contentGuidance: [
+    "Use drawers for secondary tasks that relate to the main page content — filters, settings, details panels",
+    "Title should clearly describe the drawer purpose: 'Filter Results', 'User Details', 'Settings'",
+    "Keep drawer content focused — if it requires extensive interaction, consider a full page instead",
+    "Footer actions should follow the button hierarchy: primary action on the right, secondary on the left",
+    "Avoid nesting drawers — if the content requires a sub-panel, use an accordion or inline expansion",
+    "Provide a visible close mechanism (X button) in addition to Escape and overlay click",
+    "For forms inside drawers, warn users about unsaved changes before allowing close",
+  ],
+
+  responsiveBehaviour: [
+    { breakpoint: "Mobile (<768px)", behavior: "Left/right drawers expand to full viewport width (100vw); bottom drawers remain partial height with drag handle" },
+    { breakpoint: "Tablet (768-1023px)", behavior: "Drawers use their configured size up to 80vw maximum; overlay is always shown" },
+    { breakpoint: "Desktop (1024-1439px)", behavior: "Standard drawer sizes apply; overlay can be optional for persistent/pinned drawers" },
+    { breakpoint: "Ultra-wide (>=1440px)", behavior: "Drawer sizes remain fixed — do not scale with viewport; consider persistent sidebar pattern instead" },
+  ],
+
+  accessibilitySpec: {
+    intro:
+      "Drawers function as modal dialogs anchored to viewport edges. Proper ARIA roles, focus management, and keyboard interaction are essential for screen reader and keyboard-only users.",
+    requirements: [
+      { requirement: "Role", level: "A", notes: "Drawer container must have role='dialog' and aria-modal='true' when overlay is shown" },
+      { requirement: "Accessible Name", level: "A", notes: "Use aria-labelledby pointing to the title element, or aria-label if no visible title" },
+      { requirement: "Focus Trap", level: "A", notes: "Tab and Shift+Tab must cycle within the drawer; focus must not escape to background content" },
+      { requirement: "Focus on Open", level: "A", notes: "On open, move focus to the first focusable element or the close button" },
+      { requirement: "Focus on Close", level: "A", notes: "On close, return focus to the element that triggered the drawer" },
+      { requirement: "Escape to Close", level: "A", notes: "Pressing Escape must close the drawer when closeOnEscape is true" },
+      { requirement: "Scroll Lock", level: "AA", notes: "Background content must not scroll while the drawer is open; use aria-hidden='true' on main content" },
+      { requirement: "Contrast", level: "AA", notes: "All text inside the drawer must meet 4.5:1 contrast ratio; close icon must meet 3:1 non-text contrast" },
+      { requirement: "Reduced Motion", level: "AAA", notes: "Respect prefers-reduced-motion by disabling slide animation and showing/hiding instantly" },
+    ],
+    outro: [
+      "Announce drawer open/close to screen readers using aria-live or by managing focus",
+      "Ensure the overlay is not focusable — it should only be a click target for dismissal",
+      "Test with VoiceOver, NVDA, and JAWS to verify focus trap and announcement behavior",
+    ],
+  },
+
+  qaAcceptanceCriteria: [
+    { check: "Open Animation", platform: "Web", expectedResult: "Drawer slides in from the correct edge with smooth eased transition" },
+    { check: "Close Animation", platform: "Web", expectedResult: "Drawer slides out toward its anchor edge; overlay fades out simultaneously" },
+    { check: "Overlay Click", platform: "Web", expectedResult: "Clicking overlay closes drawer when closeOnOverlayClick is true; does nothing when false" },
+    { check: "Escape Key", platform: "Web", expectedResult: "Pressing Escape closes drawer when closeOnEscape is true" },
+    { check: "Focus Trap", platform: "Web", expectedResult: "Tab cycling stays within drawer boundaries; Shift+Tab wraps to last element" },
+    { check: "Focus Restoration", platform: "Web", expectedResult: "Focus returns to trigger element after drawer closes" },
+    { check: "Scroll Lock", platform: "Web", expectedResult: "Background page does not scroll while drawer is open" },
+    { check: "Body Scroll", platform: "Web", expectedResult: "Long content inside drawer scrolls vertically; header/footer remain fixed" },
+    { check: "Side Variants", platform: "All", expectedResult: "Drawer renders correctly from left, right, and bottom edges" },
+    { check: "Screen Reader", platform: "Web", expectedResult: "Announces 'dialog' role, title, and interactive elements in reading order" },
+    { check: "Responsive Width", platform: "Mobile", expectedResult: "Drawer expands to full width on mobile viewports" },
+    { check: "Reduced Motion", platform: "Web", expectedResult: "Animation is disabled when prefers-reduced-motion is set" },
+    { check: "RTL Support", platform: "Web", expectedResult: "Left drawer becomes right drawer and vice versa in RTL locales" },
+  ],
+
+  dos: [
+    "Use drawers for contextual secondary content that relates to the current page",
+    "Always provide a visible close button in the drawer header",
+    "Return focus to the trigger element when the drawer closes",
+    "Implement a proper focus trap to prevent keyboard users from reaching background content",
+    "Use the overlay to communicate modality and provide a click-to-dismiss affordance",
+    "Apply scroll lock on the document body to prevent background scrolling",
+    "Use consistent drawer sizes across the application for visual predictability",
+  ],
+
+  donts: [
+    "Do not use drawers for primary content that should be on the main page",
+    "Do not nest drawers inside other drawers — use in-panel navigation instead",
+    "Do not omit the close button — relying solely on Escape or overlay click is insufficient",
+    "Do not allow background content to be interactive while the drawer is open",
+    "Do not use drawers for simple confirmations — use a modal dialog instead",
+    "Do not make drawers wider than 90% of the viewport width",
+    "Do not skip focus management — failing to trap focus breaks keyboard accessibility",
+  ],
+};