@ui-sdk/web 0.0.0-stage → 0.1.0-beta.1

package/docs/parts-and-composition.md

@@ -0,0 +1,57 @@
+# Parts and Composition
+
+Put a component's parts together and choose the elements they bind.
+
+A component is a set of custom elements. A Popover has a root to hold its state, a trigger to open it, and content to show.
+
+## Put Parts Together
+
+Import the component, then nest its parts as shown in its Composition:
+
+```ts
+import "@ui-sdk/web/popover"
+```
+
+```html
+<ui-popover id="details">
+  <ui-popover-trigger><button>Details</button></ui-popover-trigger>
+  <ui-popover-content>
+    <ui-popover-title>Project Details</ui-popover-title>
+    <p>Last updated today.</p>
+    <ui-popover-close><button>Done</button></ui-popover-close>
+  </ui-popover-content>
+</ui-popover>
+```
+
+Triggers and Close parts wrap your own `<button>`. These wrappers use `display: contents`, so the button participates in layout directly.
+
+Parts find their root by looking up the DOM. You can put your own layout elements between them. An external part can name its root with `for="id"`; [Controllers](./controllers.md) shows an example.
+
+## Choose the Element
+
+Use `as-child` when the part should bind to its first child. For example, render a menu item as a link:
+
+```ts
+import "@ui-sdk/web/menu"
+```
+
+```html
+<ui-menu>
+  <ui-menu-trigger><button>Account</button></ui-menu-trigger>
+  <ui-menu-content>
+    <ui-menu-item as-child><a href="/settings">Settings</a></ui-menu-item>
+  </ui-menu-content>
+</ui-menu>
+```
+
+The link receives the part's role, attributes, and keyboard behavior. Triggers and Close parts already use their first button or link, so they don't need `as-child`.
+
+## Name the Control
+
+Use a label or title part, such as `<ui-field-label>` or `<ui-dialog-title>`. For an icon button, put `aria-label` on the native button inside its wrapper.
+
+Parts write the attributes they manage, including roles, IDs, and ARIA state. Other attributes and your own listeners remain. So does a name or typing hint you write on the element: `aria-label`, `aria-labelledby`, `aria-description`, `title`, `autocomplete`, `autocapitalize`, `autocorrect`, `inputmode` and `spellcheck`. Keep those managed attributes intact when changing the markup.
+
+## Respond to State
+
+Use data attributes for styling and DOM events for changes to content. [State and Events](./state-and-events.md) shows how to listen and cancel a change.

package/docs/popups.md

@@ -0,0 +1,92 @@
+# Popups
+
+Place popup content, control dismissal, and choose its container.
+
+Popovers, menus, selects, and dialogs use the browser's top layer. They render in place, above the page, so you don't need a portal or Positioner part. Their events bubble through the elements around them like any other child's, so a click handler or a link wrapped around a popup also gets the clicks inside it. Keep popups outside clickable cards and links.
+
+## Place the Content
+
+```ts
+import "@ui-sdk/web/popover"
+```
+
+```html
+<ui-popover id="details">
+  <ui-popover-trigger><button>Details</button></ui-popover-trigger>
+  <ui-popover-content side="bottom" align="start" side-offset="8">
+    <ui-popover-title>Project Details</ui-popover-title>
+    <p>Last updated today.</p>
+    <ui-popover-close><button>Done</button></ui-popover-close>
+  </ui-popover-content>
+</ui-popover>
+```
+
+The popup flips or shifts when there isn't enough room.
+
+| Attribute           | What It Does                                                                                         |
+| ------------------- | ---------------------------------------------------------------------------------------------------- |
+| `side`              | Chooses `top`, `bottom`, `left`, `right`, `start`, or `end`. Start and end follow reading direction. |
+| `align`             | Aligns to the start, center, or end of that side.                                                    |
+| `side-offset`       | Sets the gap from the anchor, in pixels.                                                             |
+| `align-offset`      | Shifts it along its side.                                                                            |
+| `collision-padding` | Leaves space from the window's edges.                                                                |
+
+`anchor` accepts a selector for another element. For a point or rectangle, pass an anchor to the controller's `open()` method.
+
+## Control Dismissal
+
+Set `dismissible="false"` on the root to stop Escape, outside presses, focus leaving, Back, and sheet swipes from closing it. The trigger, Close part, and controller can still close it.
+
+The `dismissattempt` event reports refused dismissals through `event.detail.reason`. [State and Events](./state-and-events.md) shows how to cancel just one reason.
+
+## Modals and Sheets
+
+`modal="true"` makes the rest of the page inert and locks scrolling. Each component documents its default.
+
+Menu, Select, Combobox, Autocomplete, Popover, and Dialog support `presentation="auto"` to become a sheet on small touch screens. Use `presentation="sheet"` to always show a sheet.
+
+## Focus
+
+Dialogs, alert dialogs, drawers, and popovers move focus into their content when they open. Where it lands depends on how they opened:
+
+| Opened With                                  | Focus Goes To                                                |
+| -------------------------------------------- | ------------------------------------------------------------ |
+| Keyboard, screen reader, mouse, pen, or code | The element `initial-focus` picks.                           |
+| Touch                                        | The content itself, so no on-screen keyboard appears.        |
+| Hover                                        | Nowhere. Focus stays where it is.                            |
+| Rendered open                                | Nowhere, except in a dialog, which takes focus as it mounts. |
+
+`initial-focus` defaults to `auto`: the first focusable element, or the content when it has none. A dialog tries an element with `autofocus` first, and an alert dialog tries its first Close part. Set it to `content` to focus the content itself, `none` to leave focus alone, or a CSS selector.
+
+`modal` decides whether Tab can leave. With `modal="true"` or `modal="trap-focus"`, Tab and Shift+Tab wrap inside the content. With `modal="false"`, Tab moves from the trigger into a popover and on to the page after it, and focus leaving closes the popover. A non-modal dialog stays open.
+
+When a popup closes while focus is inside it, focus returns to the trigger. If the trigger is gone or can't take focus, focus goes to the element focused before the popup opened, then where the popup it was opened from would return focus, then to the nearest focusable element after where the trigger was. A popup a controller opened returns to the element focused before it first. Set `final-focus` to `none` to leave focus alone, or to a selector to send it somewhere else. Closing because focus moved away never moves it back, and neither does pressing something focusable outside a non-modal popup.
+
+Menus, selects, and comboboxes handle focus within their own lists, and tooltips never move it. Each component's page covers its own.
+
+## Hidden Content and Containers
+
+Closed content stays in your markup, hidden. The `openchangecomplete` event fires after opening or closing finishes, including animations. `keep-mounted` is available for animation libraries that need the closed element rendered.
+
+`container` takes a selector for the element to render into, looked up in the popup's own tree, so a popup in a shadow root finds it in that shadow root. Inside an iframe, a popup handles focus, Escape, and scroll locking in the iframe's own document. Keep a dialog containing a form outside a surrounding form, or move its content with `container`, to avoid nested forms.
+
+[Styling and Animation](./styling-and-animation.md) covers transitions.
+
+## Toasts and Confirms
+
+Place `<ui-overlay-host>` near your app's root, then call `toast()` from an event handler:
+
+```html
+<ui-overlay-host></ui-overlay-host> <button id="save">Save</button>
+```
+
+```ts
+import "@ui-sdk/web/overlays"
+import { toast } from "@ui-sdk/web"
+
+document
+  .querySelector("#save")!
+  .addEventListener("click", () => toast.success("Saved"))
+```
+
+See [Toast](./components/toast.md) and [Alert Dialog](./components/alert-dialog.md) for complete examples.

package/docs/rendering.md

@@ -0,0 +1,71 @@
+# Rendering Primitives
+
+Turn a Core primitive into custom elements with createParts.
+
+This page renders the rating from [Compose Behaviors](./core.md#compose-behaviors). Start with that guide's [complete `rating.ts`](./core.md#complete-primitive): it already handles selection, arrow keys, and focus. Here we'll connect its `root` and `star` slots to custom elements.
+
+## Define the Elements
+
+`createParts` registers one custom element for each slot you map. Save this beside `rating.ts`:
+
+```ts title="rating-web.ts"
+import { createParts, wrappedButton } from "@ui-sdk/web"
+import { rating } from "./rating"
+
+createParts(rating, {
+  root: "my-rating",
+  star: { tag: "my-rating-star", target: wrappedButton, display: "contents" },
+})
+```
+
+The root creates the primitive instance. Each star finds that instance through the root above it. `wrappedButton` puts the star's behavior and attributes on a native button inside the custom element.
+
+`createParts` also returns the element classes, named like the parts in other frameworks: `Root` and `Star`. Keep them with `const parts = createParts(rating, { ... })` to check an element, like `element instanceof parts.Star`. On the server nothing is registered, so they're `undefined`.
+
+## Render the Rating
+
+Load `rating-web.ts` from your app's module entry, then use the registered tags:
+
+```html
+<my-rating default-value="4" aria-label="Rating">
+  <my-rating-star value="1"
+    ><button aria-label="1 star">★</button></my-rating-star
+  >
+  <my-rating-star value="2"
+    ><button aria-label="2 stars">★</button></my-rating-star
+  >
+  <my-rating-star value="3"
+    ><button aria-label="3 stars">★</button></my-rating-star
+  >
+  <my-rating-star value="4"
+    ><button aria-label="4 stars">★</button></my-rating-star
+  >
+  <my-rating-star value="5"
+    ><button aria-label="5 stars">★</button></my-rating-star
+  >
+</my-rating>
+```
+
+The primitive's schema parses `default-value` as a number and each star's `value` as a string. Put the star's accessible label and styles on its button. The button receives `data-filled` when it contributes to the rating.
+
+[Styling and Animation](./styling-and-animation.md) covers styling those attributes. The native buttons remain in the HTML before the elements upgrade; their rating behavior starts when the module loads.
+
+## Listen to Changes
+
+The primitive's `onValueChange` callback becomes a `valuechange` event on the root:
+
+```ts
+import "./rating-web"
+
+const element = document.querySelector("my-rating")!
+element.addEventListener("valuechange", (event) => {
+  const { value } = (event as CustomEvent<{ value: number }>).detail
+  console.log(`Rating: ${value}`)
+})
+```
+
+Call `event.preventDefault()` to cancel a change. These events don't bubble, so listen on the root itself. [State and Events](./state-and-events.md) explains the details and controlled values.
+
+## Add Logic to a Part
+
+[Custom Parts](./custom-parts.md) builds on these same elements: choose a part's binding target, and expose API methods or live properties.

package/docs/server-rendering.md

@@ -0,0 +1,118 @@
+# Server Rendering
+
+Send HTML from the server and upgrade custom elements in the browser.
+
+Write custom elements in your server-rendered HTML. Import their modules in the browser to upgrade them and connect their behavior.
+
+## Send the Markup
+
+```html
+<ui-toggle default-pressed>
+  <button type="button" aria-pressed="true">Bold</button>
+</ui-toggle>
+<script type="module" src="/src/components.ts"></script>
+```
+
+```ts title="components.ts"
+import "@ui-sdk/web/toggle"
+```
+
+Your bundler resolves the package import. The browser upgrades `<ui-toggle>` when that module runs. Plain server-rendered HTML does not calculate the primitive’s ARIA state. Here, `aria-pressed="true"` describes the initial button before upgrade and matches `default-pressed`. After upgrade, ui-sdk keeps it in sync as the button toggles.
+
+## Before Upgrade
+
+The Bold button is visible before the script loads, but it cannot toggle yet. Native behavior still works: a submit button can submit a form, and a native input can accept text. Keyboard navigation and state changes managed by ui-sdk need the component’s script.
+
+Design the initial HTML accordingly. For a control that must submit before upgrade, include a native input or select using the fallback markup shown on its component page.
+
+## Wait for an Element
+
+Run code that uses component properties after the markup exists and the element is defined:
+
+```ts
+import "@ui-sdk/web/toggle"
+
+await customElements.whenDefined("ui-toggle")
+const toggle = document.querySelector("ui-toggle")!
+console.log(toggle.pressed)
+```
+
+Run this after the markup exists. `whenDefined` waits for the tag's registration; it doesn't wait for an element to be inserted into the document.
+
+## Saved Preferences and Storage
+
+Preferences like a color scheme or an emoji skin tone are saved in the browser, so your server can't render them. [Preferences](./core.md#preferences) covers the preferences themselves; this is how they fit server-rendered HTML.
+
+### Show Them Before the Scripts Load
+
+Write `preferencesScript([...])` from `@ui-sdk/core` into your HTML as `<ui-preferences>`'s first child. It runs as the browser parses the page, before any module, and puts every saved value on its `data-*` attribute, so CSS that selects those attributes is right from the first paint. Give the element its preferences once its module loads:
+
+```ts title="server.ts"
+import { preferencesScript } from "@ui-sdk/core"
+import { colorScheme, skinTone } from "./preferences"
+
+const page = `<body>
+  <ui-preferences>
+    <script>${preferencesScript([colorScheme, skinTone])}</script>
+    …
+  </ui-preferences>
+  <script type="module" src="/src/page.ts"></script>
+</body>`
+```
+
+```ts title="page.ts"
+import "@ui-sdk/web/preferences"
+import { colorScheme, skinTone } from "./preferences"
+
+document.querySelector("ui-preferences")!.preferences = [colorScheme, skinTone]
+```
+
+The script writes preferences made with `global: true` on `<html>`, and the others on `<ui-preferences>`. Once the element has its preferences, it keeps the attributes in step with every change. Add a `nonce` attribute to the script if your Content Security Policy needs one.
+
+### Read a Cookie on the Server
+
+A preference kept in a cookie can render on your server too, content included. Pass the request's `Cookie` header to `createCookieStorage` while rendering that request, and read the value to write it into the HTML:
+
+```ts
+const skinTone = createPreference({
+  values: ["default", "light", "medium", "dark"],
+  defaultValue: "default",
+  attribute: "data-skin-tone",
+  storage: createCookieStorage("skin-tone", {
+    cookie: request.headers.get("cookie"),
+  }),
+})
+
+const page = `<ui-preferences data-skin-tone="${skinTone.get().value}">…</ui-preferences>`
+```
+
+In the browser the same storage reads `document.cookie`.
+
+### Render the Storage Script Yourself
+
+For one element that keeps its own value, like a toolbar's density, a storage's `script` returns the same kind of inline script for a single element. Write it right after the element, since it sets the element right before it:
+
+```ts title="server.ts"
+import { createLocalStorage } from "@ui-sdk/core"
+
+const density = createLocalStorage("density")
+const script = density.script({
+  attribute: "data-density",
+  values: ["comfortable", "compact"],
+})
+
+const toolbar = `<div class="toolbar" data-density="comfortable">…</div>
+<script>${script}</script>`
+```
+
+- **Shared by ID.** Every script with the same storage kind and ID reads the storage once, however many elements it follows, and the scripts are identical, so compression shrinks the repeats.
+- **Only safe values.** Any script on your site can write the saved value, so `script` only sets attributes that start with `data-`, and only to one of `values`.
+- **Not for cookies.** A cookie storage's `script` returns undefined, since your server reads the cookie and can write the value itself.
+
+To run before the page's content at all, write `preferencesScript([...])` into `<head>`. Only global preferences make sense there, since the others go on the script's parent element.
+
+## Importing on the Server
+
+Component modules skip registration when `customElements` is unavailable. Importing one on the server doesn't upgrade markup. Load it again in the browser.
+
+Popups render in place, so your server template doesn't need a portal root. [Popups](./popups.md) covers placement, and [Forms](./forms.md) covers submission.

package/docs/state-and-events.md

@@ -0,0 +1,134 @@
+# State and Events
+
+Set initial state, change properties, and respond to DOM events.
+
+Set the starting state in HTML. Read and change it through the element's properties once it has upgraded.
+
+## Set the Starting Value
+
+```ts
+import "@ui-sdk/web/toggle"
+```
+
+```html
+<ui-toggle default-pressed><button type="button">Bold</button></ui-toggle>
+```
+
+The attribute depends on the component: `default-pressed`, `default-checked`, `default-open`, or `default-value`. Leave a boolean attribute out to turn its option off. An option that's on by default, like `loop`, turns off with `"false"`. `disabled` and `required` work like they do on native controls: written at all, even as `"false"`, they're on.
+
+## Change a Value from Script
+
+On a page with the toggle above, read or set its live `pressed` property:
+
+```ts
+import "@ui-sdk/web/toggle"
+
+await customElements.whenDefined("ui-toggle")
+const toggle = document.querySelector("ui-toggle")!
+toggle.pressed = true
+console.log(toggle.pressed)
+```
+
+Other elements expose `open`, `checked`, or `value`. These are live properties, not React-style controlled props. Changing an attribute such as `pressed` also updates state.
+
+Setting a property or attribute fires no event, like setting a native input's `value`. So a page that renders the state back into the element never hears its own write. Changes from the person using it, from the element's `api`, or from an agent fire events.
+
+## Change an Option from Script
+
+Options have properties too. On the same toggle, changing `disabled` also updates its attribute:
+
+```ts
+import "@ui-sdk/web/toggle"
+
+const toggle = document.querySelector("ui-toggle")!
+toggle.disabled = true
+```
+
+The button is now disabled, and `<ui-toggle>` has a `disabled` attribute. Set the property to `false` to remove it.
+
+Other option types follow the same pattern:
+
+| Option Type             | Property and Attribute                                   |
+| ----------------------- | -------------------------------------------------------- |
+| Boolean, off by default | `disabled = true` adds `disabled`; `false` removes it.   |
+| Boolean, on by default  | `loop = false` writes `loop="false"`.                    |
+| Text or number          | Reads back as the same type, or `undefined` when absent. |
+| List                    | Reads as an array; the attribute is comma-separated.     |
+
+Options an attribute cannot hold, such as a data menu’s `items`, are properties only.
+
+## Respond to a Change
+
+Callbacks become lowercase DOM events, such as `pressedchange` and `openchange`. Each one fires on the element whose state changed and doesn't bubble, like `toggle` on `<details>`. Its `detail` holds the requested value and the change details:
+
+| Detail   | What It Tells You                                                           |
+| -------- | --------------------------------------------------------------------------- |
+| `value`  | The requested value.                                                        |
+| `reason` | What requested the change, such as `press` or `outside-press`.              |
+| `event`  | The DOM event behind the change, when there is one.                         |
+| `source` | `keyboard`, `mouse`, `touch`, `pen`, `virtual`, `programmatic`, or `agent`. |
+
+Call `event.preventDefault()` to cancel the change. This example keeps the popover open when someone clicks outside:
+
+```html
+<ui-popover id="details">
+  <ui-popover-trigger><button>Details</button></ui-popover-trigger>
+  <ui-popover-content>
+    <ui-popover-title>Project Details</ui-popover-title>
+    <p>Last updated today.</p>
+    <ui-popover-close><button>Done</button></ui-popover-close>
+  </ui-popover-content>
+</ui-popover>
+```
+
+```ts
+import "@ui-sdk/web/popover"
+
+const popover = document.querySelector("ui-popover")!
+popover.addEventListener("openchange", (event) => {
+  if (!event.detail.value && event.detail.reason === "outside-press") {
+    event.preventDefault()
+  }
+})
+```
+
+The Done button still closes it.
+
+### Listen to Many Elements at Once
+
+Since events don't bubble, a dialog only hears its own `openchange`, never the one from an alert dialog inside it. To hear every element inside a container with one listener, listen in the capture phase. `event.target` is the element that changed:
+
+```html
+<div id="formatting">
+  <ui-toggle><button type="button">Bold</button></ui-toggle>
+  <ui-toggle><button type="button">Italic</button></ui-toggle>
+</div>
+<output id="last-change"></output>
+```
+
+```ts
+import "@ui-sdk/web/toggle"
+
+const toolbar = document.querySelector("#formatting")!
+const output = document.querySelector("#last-change")!
+
+toolbar.addEventListener(
+  "pressedchange",
+  (event) => {
+    if (event instanceof CustomEvent && event.target instanceof HTMLElement) {
+      output.textContent = `${event.target.textContent}: ${event.detail.value}`
+    }
+  },
+  { capture: true }
+)
+```
+
+## Empty and Multiple Values
+
+Select, Tabs, and Radio Group report `null` when nothing is selected. A multiple Select or Combobox uses an array. Accordion and Toggle Group always use arrays. In attributes, lists are comma-separated, such as `default-value="bold,italic"`.
+
+Add `debug` to a root to log changes while you work. [Controllers](./controllers.md) covers changing state from elsewhere.
+
+## Move an Element
+
+An element keeps its state when you move it, like a native `<details>` keeps `open`. Take it off the page and put it back later, like a view your router keeps, and it picks up where it was: the same tab selected, the same value.

package/docs/styling-and-animation.md

@@ -0,0 +1,104 @@
+# Styling and Animation
+
+Style the rendered elements and add entry and exit transitions.
+
+Parts render without styles. The component demos use plain CSS, and the same state attributes and CSS variables work with Tailwind CSS or any other stylesheet.
+
+## Style a Part
+
+Style the element that receives the behavior. For a toggle, that is the button inside its wrapper. Import `@ui-sdk/web/toggle` on this page:
+
+```html
+<ui-toggle>
+  <button
+    class="rounded-md border border-neutral-300 px-2.5 py-1.5 text-sm data-pressed:bg-neutral-100 data-disabled:opacity-50"
+  >
+    Bold
+  </button>
+</ui-toggle>
+```
+
+State attributes such as `data-pressed` and `data-disabled` are present or absent. Others have values, such as `data-side="top"`. Each component's Styling section lists its attributes and CSS variables.
+
+## CSS Modules
+
+CSS Modules need a bundler that imports a class-name map. With plain CSS, use an ordinary class name and load the stylesheet instead. Import the module and pass its class to the button:
+
+```html
+<ui-toggle id="bold"><button>Bold</button></ui-toggle>
+```
+
+```ts
+import "@ui-sdk/web/toggle"
+import styles from "./toggle.module.css"
+
+const button = document.querySelector("#bold button")!
+button.classList.add(styles.toggle)
+```
+
+```css title="toggle.module.css"
+.toggle {
+  cursor: default;
+  border: 1px solid var(--input, #e5e5e5);
+  border-radius: 1.125rem;
+  background: transparent;
+  padding: 0.375rem 0.625rem;
+  color: inherit;
+  font: inherit;
+  font-size: 0.875rem;
+}
+
+.toggle[data-pressed] {
+  background: var(--muted, #f5f5f5);
+}
+
+.toggle[data-disabled] {
+  opacity: 0.5;
+}
+
+.toggle:focus-visible {
+  outline: 2px solid var(--ring, #a3a3a3);
+  outline-offset: 2px;
+}
+```
+
+## Animate Opening and Closing
+
+Import `@ui-sdk/web/popover`, then style `data-starting-style` for entry and `data-ending-style` for exit:
+
+```html
+<ui-popover id="details">
+  <ui-popover-trigger><button>Details</button></ui-popover-trigger>
+  <ui-popover-content
+    class="origin-(--transform-origin) transition-[opacity,scale] duration-150 data-starting-style:scale-96 data-starting-style:opacity-0 data-ending-style:scale-96 data-ending-style:opacity-0 motion-reduce:transition-none"
+  >
+    <ui-popover-title>Project Details</ui-popover-title>
+    <p>Last updated today.</p>
+    <ui-popover-close><button>Done</button></ui-popover-close>
+  </ui-popover-content>
+</ui-popover>
+```
+
+The popup stays shown until its exit transition or animation finishes, then becomes hidden. Put exit styles on `data-ending-style`; `data-closed` describes state but doesn't wait for an exit.
+
+Popups provide `--anchor-width` and `--available-height` for sizing. Use those and `data-slot` rather than generated IDs. [Popups](./popups.md) covers placement and containers.
+
+## The ui-sdk Layer
+
+A few behaviors need a little CSS, like keeping a closed popup hidden or giving each element a default `display`, so ui-sdk adds it to the page in a cascade layer named `ui-sdk`. Declare that layer at the top of the stylesheet your page links, so your own styles win over it wherever the page puts them. With Tailwind, put it above `@import "tailwindcss"`:
+
+```css
+@layer ui-sdk;
+```
+
+## Content Security Policy
+
+A Content Security Policy without `'unsafe-inline'` in `style-src` blocks the CSS ui-sdk adds to the page. Give ui-sdk your policy's nonce with a meta tag in the page's `<head>`, next to where your server writes the policy:
+
+```html
+<meta property="csp-nonce" nonce="your-nonce" />
+```
+
+With Vite, set `html.cspNonce` in your Vite config to a placeholder, and Vite writes this tag for you. Your server replaces the placeholder with a new nonce on each request. Shadow roots need nothing: ui-sdk adopts constructed style sheets there, which no policy blocks.
+
+If your policy has no nonce for styles, add the tag without the `nonce` attribute, and ui-sdk adopts constructed style sheets on the page too. If your code replaces `document.adoptedStyleSheets`, ui-sdk adds its sheets back as elements update or are added.