fix: ensure all component internals have part names (#3306)

* fix: ensure all component internals have part names

* ensure badge styles do not break

Author: chrisdholt

packages/web-components/fast-components-msft/src/badge/badge.styles.ts

@@ -15,7 +15,7 @@ export const BadgeStyles = css`
         line-height: var(--type-ramp-minus-1-height);
     }
 
-    .badge {
+    .control {
         border-radius: calc(var(--corner-radius) * 1px);
         padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
     }

packages/web-components/fast-components/src/badge/badge.styles.ts

@@ -10,18 +10,18 @@ export const BadgeStyles = css`
         line-height: var(--type-ramp-minus-1-height);
     }
 
-    .badge {
+    .control {
         border-radius: calc(var(--corner-radius) * 1px);
         padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
         color: ${accentForegroundRestBehavior.var};
         font-weight: 600;
     }
 
-    .badge[style] {
+    .control[style] {
         font-weight: 400;
     }
 
-    :host(.circular) .badge {
+    :host(.circular) .control {
         border-radius: 100px;
         padding: 0 calc(var(--design-unit) * 1px);
         ${

packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.template.ts

@@ -35,6 +35,7 @@ export const AccordionItemTemplate = html<AccordionItem>`
         </div>
         <div
             class="region"
+            part="region"
             id="${x => x.id}-panel"
             role="region"
             aria-labelledby="${x => x.id}"

packages/web-components/fast-foundation/src/anchor/anchor.template.ts

@@ -6,6 +6,7 @@ export const AnchorTemplate = html<Anchor>`
     <template class="${x => x.appearance}">
         <a
             class="control"
+            part="control"
             download="${x => x.download}"
             href="${x => x.href}"
             hreflang="${x => x.hreflang}"

packages/web-components/fast-foundation/src/badge/badge.template.ts

@@ -4,7 +4,8 @@ import { Badge } from "./badge";
 export const BadgeTemplate = html<Badge>`
     <template class="${x => (x.circular ? "circular" : "")}">
         <div
-            class="badge"
+            class="control"
+            part="control"
             style="${x =>
                 x.fill || x.color
                     ? `background-color: var(--badge-fill-${x.fill}); color: var(--badge-color-${x.color})`

packages/web-components/fast-foundation/src/button/button.template.ts

@@ -6,6 +6,7 @@ export const ButtonTemplate = html<Button>`
     <template class="${x => x.appearance}">
         <button
             class="control"
+            part="control"
             ?autofocus=${x => x.autofocus}
             ?disabled=${x => x.disabled}
             form=${x => x.formId}