Weekly crew plan
Assign jobs to crews and see conflicts before Monday.
```
Selected state needs a non-colour signal too: a check icon, a badge, or `aria-checked`/`aria-current` on the control.
---
## 3. Chips
Compact choices and filters. A filter chip is a toggle button.
| Variant | Emphasis | Use for |
|---|---|---|
| `chip` | Low | A static tag or a summary of a choice; not clickable |
| `chip-filter` | Low | Filters and view switches that toggle on and off |
| `chip-filter[aria-pressed="true"]` | Medium | The selected filter: `secondary-container`, plus a check icon so selection isn't colour alone |
```css
.chip {
display: inline-flex;
align-items: center;
gap: var(--md-sys-spacing-2);
min-height: var(--md-sys-size-control-sm);
padding: 0 var(--md-sys-spacing-3);
font: var(--md-sys-typescale-label-large);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
border: 1px solid var(--md-sys-color-outline-variant);
border-radius: var(--md-sys-shape-corner-small);
background: transparent;
color: var(--md-sys-color-on-surface-variant);
white-space: nowrap;
}
.chip svg { width: var(--md-sys-size-icon); height: var(--md-sys-size-icon); }
.chip-filter { cursor: pointer; }
.chip-filter[aria-pressed="true"] {
background: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
border-color: transparent;
}
.chip-filter:disabled {
background: transparent;
color: var(--md-sys-color-disabled-content);
border-color: var(--md-sys-color-disabled-container);
cursor: not-allowed;
pointer-events: none;
}
.chip-group { display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-2); }
```
```html