Fix #469: wrap --ag-focus in rgba() to restore invisible focus rings (#472)

* Bump core version for v2/site

* Fix #469: wrap --ag-focus in rgba() on collapsible summary:focus-visible

--ag-focus is a raw RGB triplet, not a hex color, so it must be used
as rgba(var(--ag-focus), 0.5) to produce a valid outline color.
Matches the pattern already used by ag-accordion-item.

* Fix #469: wrap --ag-focus in rgba() for Badge, Breadcrumb, Menu, IconButton

Audit of v2/lib components revealed four more components using bare
var(--ag-focus) as an outline color. Since --ag-focus is a raw RGB
triplet, it must be wrapped in rgba() to produce a valid CSS color.
Aligns all components with the correct pattern already used by Accordion,
Button, Checkbox, Input, Link, Pagination, Radio, Toggle, and others.

Author: roblevintennis

v2/lib/src/components/Badge/core/_Badge.ts

@@ -108,7 +108,7 @@ export class AgBadge extends LitElement implements BadgeProps {
       filter: brightness(1.1);
     }
     :host([interactive]) .badge:focus-visible {
-      outline: var(--ag-focus-width) solid var(--ag-focus);
+      outline: var(--ag-focus-width) solid rgba(var(--ag-focus), 0.5);
       outline-offset: var(--ag-focus-offset);
     }
     :host([single-char]) .badge {

v2/lib/src/components/Breadcrumb/core/_Breadcrumb.ts

@@ -145,7 +145,7 @@ export class AgBreadcrumb extends LitElement implements BreadcrumbProps {
     }
 
     .ag-breadcrumb__link:focus-visible {
-      outline: var(--ag-focus-width) solid var(--ag-focus);
+      outline: var(--ag-focus-width) solid rgba(var(--ag-focus), 0.5);
       outline-offset: var(--ag-focus-offset);
     }
 

v2/lib/src/components/Collapsible/core/_Collapsible.ts

@@ -88,7 +88,7 @@ export class AgCollapsible extends LitElement implements CollapsibleProps {
     }
 
     summary:focus-visible {
-      outline: var(--ag-focus-width) solid var(--ag-focus);
+      outline: var(--ag-focus-width) solid rgba(var(--ag-focus), 0.5);
       outline-offset: var(--ag-focus-offset);
       transition: outline var(--ag-motion-medium) ease;
     }

v2/lib/src/components/IconButton/core/_IconButton.ts

@@ -152,7 +152,7 @@ export class AgIconButton extends LitElement implements IconButtonProps {
 
     /* Focus state - High contrast, color-independent */
     button:focus-visible {
-      outline: var(--ag-focus-width) solid var(--ag-focus);
+      outline: var(--ag-focus-width) solid rgba(var(--ag-focus), 0.5);
       outline-offset: var(--ag-focus-offset);
     }
 

v2/lib/src/components/Menu/core/_Menu.ts

@@ -834,7 +834,7 @@ export class AgMenuItem extends LitElement implements MenuItemProps {
     button:focus,
     a:focus {
       background-color: var(--ag-background-secondary);
-      outline: var(--ag-focus-width) solid var(--ag-focus);
+      outline: var(--ag-focus-width) solid rgba(var(--ag-focus), 0.5);
       outline-offset: 0;
     }