fix(docs): update css imports and migration guide APIs in 3.x docs

- Update css imports from '@microsoft/fast-element' to
  '@microsoft/fast-element/styles.js' across 5 doc files
- Replace ElementController.configHydration() with enableHydration()
- Replace ElementHydrationCallbacks with HydrationOptions

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: janechu

sites/website/src/docs/3.x/advanced/working-with-custom-elements.md

@@ -66,7 +66,8 @@ const template = html<MyProgress>`
 
 **Example:**
 ```ts
-import { attr, css, FASTElement } from '@microsoft/fast-element';
+import { attr, FASTElement } from '@microsoft/fast-element';
+import { css } from "@microsoft/fast-element/styles.js";
 
 class MyComponent extends FASTElement {
   private dynamicCSS = css`
@@ -99,7 +100,8 @@ class MyComponent extends FASTElement {
 For external signals such as [matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia), keep the listener on the element and toggle a separate stylesheet through the same controller APIs. `css` templates stay static, so move runtime conditions into the element rather than binding them inside the stylesheet:
 
 ```ts
-import { css, FASTElement } from "@microsoft/fast-element";
+import { FASTElement } from "@microsoft/fast-element";
+import { css } from "@microsoft/fast-element/styles.js";
 
 const darkStyles = css`
   :host {

sites/website/src/docs/3.x/advanced/working-without-decorators.md

@@ -17,7 +17,8 @@ Most of our documented examples include the use of TypeScript decorators. Howeve
 When defining your component, you may pass in attributes in the same configuration object as the name, template, and styles:
 
 ```javascript
-import { FASTElement, html, css } from '@microsoft/fast-element';
+import { FASTElement, html } from '@microsoft/fast-element';
+import { css } from "@microsoft/fast-element/styles.js";
 
 export class MyElement extends FASTElement {
   // component logic
@@ -38,7 +39,8 @@ MyElement.define({
 This accepts the same configuration options as the `@attr` so for example to bind a property name that is different from an attribute name:
 
 ```javascript
-import { FASTElement, html, css } from '@microsoft/fast-element';
+import { FASTElement, html } from '@microsoft/fast-element';
+import { css } from "@microsoft/fast-element/styles.js";
 
 export class MyElement extends FASTElement {
   constructor() {
@@ -71,7 +73,8 @@ In the above example we are setting the `currentCount` in the constructor and no
 If you need to add a converter to your attribute:
 
 ```javascript
-import { FASTElement, html, css } from '@microsoft/fast-element';
+import { FASTElement, html } from '@microsoft/fast-element';
+import { css } from "@microsoft/fast-element/styles.js";
 
 const converter = {
   toView: (value) => {

sites/website/src/docs/3.x/declarative-templates/defining-elements.md

@@ -75,7 +75,8 @@ my-app/
 **`main.ts`:**
 
 ```ts
-import { FASTElement, attr, css, observable } from "@microsoft/fast-element";
+import { FASTElement, attr, observable } from "@microsoft/fast-element";
+import { css } from "@microsoft/fast-element/styles.js";
 import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
 
 class TaskItem extends FASTElement {

sites/website/src/docs/3.x/getting-started/css-templates.md

@@ -20,7 +20,8 @@ The `@microsoft/fast-element` package offers a named export `css` which is a [ta
 
 **Example:**
 ```ts
-import { FASTElement, attr, css, html } from '@microsoft/fast-element';
+import { FASTElement, attr, html } from '@microsoft/fast-element';
+import { css } from "@microsoft/fast-element/styles.js";
 
 const template = html`
   <span>${x => x.greeting.toUpperCase()}</span>

sites/website/src/docs/3.x/getting-started/quick-start.md

@@ -27,7 +27,8 @@ A web component created using FAST is comprised of 3 parts, the HTML template, t
 
 To start, let's create a simple web component that combines all the necessary parts:
 ```typescript
-import { attr, css, FASTElement, html } from "@microsoft/fast-element";
+import { attr, FASTElement, html } from "@microsoft/fast-element";
+import { css } from "@microsoft/fast-element/styles.js";
 
 /**
  * Create an HTML template using the html tag template literal,

sites/website/src/docs/3.x/migration-guide.md

@@ -251,7 +251,8 @@ The `KernelServiceId` enum (used with `FAST.getById()`) has been removed. Import
 
 2.x Example:
 ```ts
-import { css, ElementStyles } from "@microsoft/fast-element";
+import { ElementStyles } from "@microsoft/fast-element";
+import { css } from "@microsoft/fast-element/styles.js";
 ```
 
 3.x Example:
@@ -313,8 +314,8 @@ The `HydrationMarkup` API methods have been renamed (e.g., `parseAttributeBindin
 |---|---|---|
 | `ElementController.isPrerendered` | `fast-element` | `Promise<boolean>` — resolves `true` when element had DSD at connect time |
 | `ElementController.isHydrated` | `fast-element` | `Promise<boolean>` — resolves `true` only when hydration ran successfully |
-| `ElementController.configHydration()` | `fast-element` | Registers hydration lifecycle callbacks |
+| `enableHydration()` | `fast-element/hydration.js` | Enables hydration support for FAST elements |
 | `HydrationTracker` | `fast-element` | Standalone hydration lifecycle tracker class |
-| `ElementHydrationCallbacks` | `fast-element` | Type for hydration lifecycle callbacks |
+| `HydrationOptions` | `fast-element/hydration.js` | Type for hydration configuration options |
 | `ViewController.isPrerendered` | `fast-element` | `Promise<boolean>` — DSD detection for custom directives |
 | `ViewController.isHydrated` | `fast-element` | `Promise<boolean>` — hydration status for custom directives |