# ch-edit: Styling

## Table of Contents

- [Shadow Parts](#shadow-parts)
- [CSS Custom Properties](#css-custom-properties)
- [Shadow DOM Layout](#shadow-dom-layout)
  - [Case 1: Single-line input](#case-1-single-line-input)
  - [Case 2: Multiline (textarea)](#case-2-multiline-textarea)
- [Styling Recipes](#styling-recipes)
- [Anti-patterns](#anti-patterns)
- [Do's and Don'ts](#dos-and-donts)

## Shadow Parts

| Part                     | Description                                                                                                                                          |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `"clear-button"`         | The button rendered for clearing the value when `type` is `"search"` and the control has a value.                                                    |
| `"date-placeholder"`     | A placeholder displayed when the control is editable (`readonly="false"`), has no value set, and its type is `"datetime-local" \| "date" \| "time"`. |
| `"disabled"`             | Present in the `clear-button` and `show-password-button` parts when the control is disabled.                                                         |
| `"password-displayed"`   | Present in the `show-password-button` part when the password is currently visible.                                                                   |
| `"password-hidden"`      | Present in the `show-password-button` part when the password is currently hidden.                                                                    |
| `"show-password-button"` | The button rendered for toggling password visibility when `showPasswordButton` is `true` and `type` is `"password"`.                                 |

## CSS Custom Properties

| Name                                   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| -------------------------------------- |   |
| `--ch-edit-auto-fill-background-color` | Define the background color when the edit is auto filled. (#e8f0fe by default)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `--ch-edit-gap`                        | Specifies the gap between the start image and the value of the control. @default 0px                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `--ch-edit__background-image-size`     | Specifies the size of the start and clear images of the control. @default 100%                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `--ch-edit__clear-button-image`        | Specifies the image for the clear button. @default url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"/></svg>')                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `--ch-edit__image-size`                | Specifies the box size that contains the start and clear images of the control. @default 0.875em                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `--ch-edit__password-displayed-image`  | Specifies the image for the show password button when the password is displayed. @default url('data:image/svg+xml,<svg width="24" height="24" style="transform:scale(1.06) translateX(0.5px)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.7306 4.25083C20.065 4.58569 20.065 5.12817 19.7306 5.46303L5.64167 19.6777C5.4817 19.8397 5.26322 19.9304 5.03558 19.9293C4.68891 19.929 4.37651 19.7201 4.24389 19.3998C4.11127 19.0795 4.1845 18.7108 4.42948 18.4656L18.5184 4.25083C18.8533 3.91639 19.3957 3.91639 19.7306 4.25083ZM17.747 9.104L18.1589 9.38794C19.2025 10.1307 20.1595 10.9891 21.0114 11.9471C21.0114 11.9471 16.9746 16.7044 11.9886 16.7044C11.4534 16.686 10.9212 16.6171 10.399 16.4986L11.3253 15.5609C11.5437 15.6047 11.7658 15.6276 11.9886 15.6295C12.9711 15.6386 13.9166 15.2547 14.6146 14.5631C15.3126 13.8716 15.7052 12.9297 15.7052 11.9471C15.7056 11.7016 15.6826 11.4565 15.6366 11.2152L17.747 9.104ZM11.9886 7.1441C12.6002 7.14913 13.2096 7.21812 13.8068 7.34994L12.8005 8.35629C12.534 8.29641 12.2617 8.26573 11.9886 8.2648C9.96827 8.28363 8.34044 9.92676 8.34053 11.9471C8.34586 12.232 8.38035 12.5156 8.44345 12.7934L6.43074 14.8175V14.829C5.16463 14.011 4.01122 13.0306 3 11.9128C3 11.9128 7.03684 7.1441 11.9886 7.1441ZM14.5159 12.336C14.3441 13.402 13.5111 14.2396 12.446 14.4173L14.5159 12.336ZM11.7598 9.44269L9.47267 11.7299C9.57903 10.5135 10.5434 9.54906 11.7598 9.44269Z"/></svg>') |
| `--ch-edit__password-hidden-image`     | Specifies the image for the show password button when the password is hidden. @default url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 7C17.7497 7 22 11.988 22 11.988V12.024C22 12.024 17.7376 17 12.5 17C7.26236 17 3 11.988 3 11.988C3 11.988 7.25032 7 12.5 7ZM9.73369 9.28969C8.62237 10.3998 8.29261 12.0676 8.89837 13.5144C9.50412 14.9612 10.9259 15.9017 12.5 15.8969C14.6432 15.8903 16.3771 14.1583 16.3771 12.024C16.3771 10.4564 15.4282 9.0435 13.9735 8.44475C12.5187 7.84601 10.845 8.17956 9.73369 9.28969ZM12.5 9.3741C13.9669 9.38067 15.1544 10.5632 15.161 12.024C15.161 13.4875 13.9696 14.6739 12.5 14.6739C11.0304 14.6739 9.83904 13.4875 9.83904 12.024C9.83904 10.5605 11.0304 9.3741 12.5 9.3741Z"/></svg>')                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `--ch-placeholder-color`               | Define the placeholder color when the edit does not have a value set. (currentColor by default)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |

## Shadow DOM Layout

## Case 1: Single-line input

```
<ch-edit part="[ch-edit--empty-value] [{hostParts}]">
  | #shadow-root
  | <!-- when showAdditionalContentBefore -->
  | <slot name="additional-content-before" />
  |
  | <input type="text | email | number | password | ..." />
  |
  | <!-- when type === "date" && placeholder && !value -->
  | <div part="date-placeholder">Placeholder text</div>
  |
  | <!-- when showAdditionalContentAfter -->
  | <slot name="additional-content-after" />
  |
  | <!-- when type === "search" && value -->
  | <button part="clear-button [disabled]"></button>
  |
  | <!-- when type === "password" && showPasswordButton -->
  | <button part="show-password-button [disabled] [password-displayed | password-hidden]"></button>
</ch-edit>
```

## Case 2: Multiline (textarea)

```
<ch-edit part="[ch-edit--empty-value] [{hostParts}]">
  | #shadow-root
  | <!-- when showAdditionalContentBefore -->
  | <slot name="additional-content-before" />
  |
  | <textarea></textarea>
  |
  | <!-- when showAdditionalContentAfter -->
  | <slot name="additional-content-after" />
</ch-edit>
```

## Styling Recipes

### Bordered Input with Focus Ring

```css
ch-edit {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

ch-edit:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
```

### Search Input with Icon

```css
ch-edit[type="search"] {
  --ch-edit__image-size: 18px;
  --ch-edit-gap: 8px;
  --ch-edit__background-image-size: 80%;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 6px 12px;
}

ch-edit[type="search"]::part(clear-button) {
  margin-inline-end: 4px;
  opacity: 0.5;
}

ch-edit[type="search"]::part(clear-button):hover {
  opacity: 1;
}
```

### Password Field with Toggle

```css
ch-edit[type="password"] {
  --ch-edit__image-size: 20px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 12px;
}

ch-edit::part(show-password-button) {
  padding: 4px 8px;
  opacity: 0.6;
  transition: opacity 0.15s;
}

ch-edit::part(show-password-button):hover {
  opacity: 1;
}

ch-edit::part(show-password-button password-displayed) {
  color: #2563eb;
}
```

### Disabled State Styling

```css
ch-edit[disabled] {
  opacity: 0.5;
  background-color: #f5f5f5;
  cursor: not-allowed;
}

ch-edit::part(clear-button disabled) {
  opacity: 0.3;
  cursor: not-allowed;
}
```

### Multiline Auto-grow Textarea

```css
ch-edit[multiline] {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 12px;
  min-block-size: 80px;
  max-block-size: 300px;
  overflow-y: auto;
}

ch-edit[multiline]:focus-within {
  border-color: #2563eb;
  outline: 2px solid rgba(37, 99, 235, 0.2);
  outline-offset: 1px;
}
```

## Anti-patterns

### Setting `display: none` to hide the component

Avoid `display: none` on `ch-edit` because it breaks the internal grid layout when the element becomes visible again. Use the `hidden` attribute or `visibility: hidden` instead

```css
/* Avoid */
ch-edit {
  display: none;
}

/* Prefer */
ch-edit[hidden] {
  visibility: hidden;
  position: absolute;
}
```

### Overriding internal element styles with `!important`

The component uses shadow DOM, so external selectors cannot reach internal elements. Using `!important` on the host to force inherited styles can conflict with auto-fill detection and internal grid layouts. Use CSS custom properties and `::part()` selectors instead

```css
/* Avoid */
ch-edit {
  background-color: white !important;
}

/* Prefer */
ch-edit {
  --ch-edit-auto-fill-background-color: white;
}
```

### Using placeholder as a label

Never rely on `--ch-placeholder-color` and the `placeholder` property as a substitute for a visible `<label>`. Placeholders disappear when the user types and are not reliably announced by all screen readers

```html
<!-- Avoid -->
<ch-edit placeholder="Email address"></ch-edit>

<!-- Prefer -->
<label for="email">Email address</label>
<ch-edit id="email" placeholder="e.g. user@example.com"></ch-edit>
```

## Do's and Don'ts

### Do

- Prefer CSS custom properties (e.g., `--ch-edit__*`) over `::part()` for simple theming
- Use class selectors on the host (e.g., `.my-edit::part(...)`) instead of tag names
- Use state part intersections (e.g., `::part(element state)`) for conditional styling
- Test styling changes across all component states (hover, focus, disabled, etc.)

### Don't

- Don't chain `::part()` selectors — use `exportparts` if needed
- Don't use combinators (` `, `>`, `+`, `~`) after `::part()`
- Don't use structural pseudo-classes (`:first-child`, `:nth-child()`, etc.) with `::part()`
- Don't override internal CSS custom properties that are not documented

---

For more details on shadow parts best practices, see the [CSS Shadow Parts Guide](../../css-shadow-parts-guide.md)
