# Styling

> Style the data-part hooks with your own CSS.

Style the components with your own CSS. Every element has a `data-part` attribute and states are attributes too; each component page lists them.

```css
[data-part="select-trigger"] {
  border: 1px solid var(--border);
  border-radius: 8px;

  &[data-select-open] {
    border-color: var(--accent);
  }
}

[data-part="select-option"][data-select-active] {
  background: var(--surface-3);
}
```

## Fields

On Input, Textarea, Select and Combobox, `class`, `style` and other attributes go to the control itself, not the field around it. To size the whole field, label included, wrap it:

```vue-html
<div class="w-80">
  <UiInput v-model="email" label="Email" />
</div>
```

## core.css

It's required, and only handles positioning and visibility. It sits in the `humanonlyweb-ui` cascade layer, so your unlayered CSS always wins over it. If you use layers, list it first:

```css
@layer reset, humanonlyweb-ui, base, components;
```

## Motion

Overlays are native popovers, so animate them in with `@starting-style`:

```css
[data-part="menu-list"] {
  opacity: 0;
  transition:
    opacity 120ms,
    display 120ms allow-discrete,
    overlay 120ms allow-discrete;

  &:popover-open {
    opacity: 1;
  }
}

@starting-style {
  [data-part="menu-list"]:popover-open {
    opacity: 0;
  }
}
```

- **Accordion:** transition `grid-template-rows` on `accordion-panel`.
- **Tabs, Segmented:** transition the indicator under `[data-tabs-animate]` / `[data-segmented-animate]`.
- **Toasts:** `ui-toast-enter-from`, `ui-toast-leave-to` and `ui-toast-move`.