Todo List
A to-do list with the feel of paper: hand-drawn ticks, notes, highlighters, swipe and drag, and a remembered look.
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
heading | string | — | Title of the list. |
heading-editable | boolean | false | The heading can be renamed in place: it becomes a c2-inline-edit, shown even while empty (with
heading-placeholder). Ignored while readonly. |
heading-placeholder | string | — | What an editable heading shows while it is empty. Unset, Untitled list in the list's language. |
actions-placement | TodoActionsPlacement | start | Where the actions slot sits: before the customize button (start) or after it (end). |
heading-level | number | 2 | Heading level (1-6) the title is announced with. |
icon | string | — | Icon beside the heading: a list icon (work, groceries, travel… see todoListIcons), or any @c2n/task-icons
name. Suggested from the heading when missing; none leaves it empty. |
tasks | TodoTask[] | [] | The tasks. Accepts a JSON array in the attribute. The list updates it as the user works. |
pens | TodoColor[] | undefined | — | The pens a task's text can take: each entry a CSS colour (var() included), or { value, name } to give its
swatch a friendly name ({ "value": "#4f46e5", "name": "Brand" }); without one it is called Pen 2. A task stores
its pen by 1-based position (ink: 2), so give a dark theme a list of the same length and order and every task
recolours. Unset, the five documented --c2-todo-list__pen-* pens, which the palettes recolour. A list you give is
used as given: its contrast is yours to choose. |
highlights | TodoColor[] | undefined | — | The highlighters behind a task, as colours or { value, name } entries mixed into the background, stored by position like pens. Unset, the six documented --c2-todo-list__highlight-* highlighters. |
backgrounds | TodoBackgroundOption[] | undefined | — | The backgrounds the customize panel offers, after its default one (position 0, which follows the theme), as
{ value, color, name } entries: value the surface, color the text. The look stores the viewer's choice by
position, so a dark theme can hand over a list of the same length and order. Unset, the six default backgrounds,
which were checked for contrast; a list you give is used as given, and its contrast is yours to choose. |
palettes | TodoPaletteOption[] | undefined | — | The palettes the customize panel offers, as { name, accent, pens, highlights, strength, dark } entries: the
accent, and pen and highlighter values by position, with optional dark overrides used on a dark background.
Stored by position like backgrounds. Unset, the four default palettes, which were checked for contrast against
the default backgrounds; a list you give is used as given. |
progress | TodoProgress | ring | How progress is drawn: a ring beside the heading, a bar under it, a large ring above it, or not at all. The viewer's choice in the customize panel wins. |
customizable | boolean | false | Shows the palette button and its customize panel, where the viewer styles the whole list. |
storage-key | string | — | Remembers the viewer's customization in localStorage under c2-todo-list:<storage-key>. Give every list on a
site its own key. |
persist-tasks | boolean | false | With storage-key, also remembers the tasks, which then win over the tasks the page provides. |
readonly | boolean | false | Tasks cannot be checked, added, reordered, swiped, removed or edited. The look can still be customized. |
placeholder | string | — | Placeholder of the add field. Unset, Add a task — a note after a dash in the list's language. |
Slots
| Name | Description |
|---|---|
actions | Extra controls at the end of the header. actions-placement puts them before (default) or after the customize button. |
empty | Content shown when the list has no tasks at all. Defaults to a short sentence. |
Events
| Name | Type | Description |
|---|---|---|
look-change | CustomEvent<TodoLookChangeEventDetail> | The viewer changed the look in the customize panel, or reset it. |
tasks-change | CustomEvent<TodoTasksChangeEventDetail> | Fired after every change to the tasks with the new list, for two-way binding. |
task-reorder | CustomEvent<TodoTaskReorderEventDetail> | A task was dragged, or moved with the keyboard, to a new position. |
task-toggle | CustomEvent<TodoTaskEventDetail> | A task was checked or unchecked. detail.task is the updated task. |
task-add | CustomEvent<TodoTaskEventDetail> | A task was added from the add field, or a deletion was undone. |
task-remove | CustomEvent<TodoTaskEventDetail> | A task was deleted. detail.task is the removed task. |
task-archive | CustomEvent<TodoTaskEventDetail> | A task was moved to the archive. |
task-restore | CustomEvent<TodoTaskEventDetail> | An archived task was restored, or an archive was undone. |
task-change | CustomEvent<TodoTaskEventDetail> | A task's label, note, icon, highlight, pen or won't-do state changed. |
heading-change | CustomEvent<TodoHeadingChangeEventDetail> | The viewer renamed the list (heading-editable). heading is already updated. |
CSS custom properties
Grouped by semantic target and state from --c2-<component>__<target>__<state>--<property>. Click a group to collapse it; click a name to copy it.
| Name | Type | Default | Description |
|---|---|---|---|
--c2-todo-list--transition-duration | duration | 200ms | Duration of the pen strokes, swipes and progress animations. |
--c2-todo-list__container--background-color | color | #ffffff | Background of the list. |
--c2-todo-list__container--color | color | #18181b | Text colour of the heading and tasks. |
--c2-todo-list__container--border | border | 1px solid #e4e4e7 | Border of the list. |
--c2-todo-list__container--border-radius | border-radius | 14px | Corner radius of the list. |
--c2-todo-list__container--box-shadow | shadow | 0 8px 24px rgba(24, 24, 27, 0.08) | Shadow of the list. |
--c2-todo-list__container--padding | pixel | 20px | Inner padding of the list. |
--c2-todo-list__container--gap | pixel | 16px | Space between the header, filters, tasks and add field. |
--c2-todo-list__heading--font-size | pixel | 18px | Font size of the heading. |
--c2-todo-list__heading--font-weight | font-weight | 600 | Font weight of the heading. |
--c2-todo-list__meta--color | color | #71717a | Colour of the progress summary, notes and panel labels. |
--c2-todo-list__meta--font-size | pixel | 12px | Font size of the progress summary and notes. |
--c2-todo-list__accent--color | color | #0265dc | The pen of ticks, strike lines, the progress and the add button. |
--c2-todo-list__on-accent--color | color | #ffffff | Text drawn on the accent colour. |
--c2-todo-list__track--color | color | #e4e4e7 | Unfilled part of the progress ring and bar. |
--c2-todo-list__ring--size | pixel | 44px | Size of the progress ring beside the heading. |
--c2-todo-list__ring--stroke-width | number | 4.5 | Stroke of the progress ring, in units of its 48x48 canvas. |
--c2-todo-list__hero-ring--size | pixel | 120px | Size of the hero progress ring. |
--c2-todo-list__hero-ring--stroke-width | number | 7 | Stroke of the hero ring, in units of its 48x48 canvas. |
--c2-todo-list__bar--height | pixel | 8px | Height of the progress bar. |
--c2-todo-list__chip--background-color | color | #f4f4f5 | Background of the filter tabs and note editor. |
--c2-todo-list__row--padding | spacing | 9px 8px | Padding of a task row. |
--c2-todo-list__row--gap | pixel | 8px | Space between the parts of a task row. |
--c2-todo-list__row--border-radius | border-radius | 8px | Corner radius of a task row. |
--c2-todo-list__row__divider--color | color | #f4f4f5 | Line between task rows. |
--c2-todo-list__row__hover--background-color | color | #fafafa | Background of a hovered task row. |
--c2-todo-list__mark--size | pixel | 28px | Size of the hand-drawn check mark. |
--c2-todo-list__mark--color | color | #a1a1aa | Pen of the open circle before a task is checked. |
--c2-todo-list__mark--stroke-width | number | 2.6 | Stroke of the tick and cross, in units of their 24x24 canvas. |
--c2-todo-list__dropped--color | color | #dc2626 | Pen of the cross on a task that won't be done. |
--c2-todo-list__label--font-size | pixel | 14px | Font size of a task. |
--c2-todo-list__label__done--color | color | #71717a | Colour of a checked task's text. |
--c2-todo-list__icon--size | pixel | 20px | Size of a task's icon. |
--c2-todo-list__add--border-color | color | #d4d4d8 | Colour of the dashed border around the add field. |
--c2-todo-list__panel--background-color | color | #fafafa | Background of the customize panel and task menu. |
--c2-todo-list__panel--border-radius | border-radius | 8px | Corner radius of the customize panel and task menu. |
--c2-todo-list__toast--background-color | color | #18181b | Background of the undo message. |
--c2-todo-list__toast--color | color | #fafafa | Text of the undo message. |
--c2-todo-list__focus--outline | outline | 2px solid rgba(2, 101, 220, 0.4) | Focus ring of every control. |
--c2-todo-list__pen-blue--color | color | #0265dc | The blue pen. |
--c2-todo-list__pen-red--color | color | #dc2626 | The red pen. |
--c2-todo-list__pen-green--color | color | #0f766e | The green pen. |
--c2-todo-list__pen-violet--color | color | #7c3aed | The violet pen. |
--c2-todo-list__pen-graphite--color | color | #71717a | The graphite pen. |
--c2-todo-list__highlight-yellow--color | color | #facc15 | The yellow highlighter, mixed into the background. |
--c2-todo-list__highlight-green--color | color | #22c55e | The green highlighter, mixed into the background. |
--c2-todo-list__highlight-blue--color | color | #3b82f6 | The blue highlighter, mixed into the background. |
--c2-todo-list__highlight-pink--color | color | #ec4899 | The pink highlighter, mixed into the background. |
--c2-todo-list__highlight-orange--color | color | #f97316 | The orange highlighter, mixed into the background. |
--c2-todo-list__highlight-violet--color | color | #8b5cf6 | The violet highlighter, mixed into the background. |
Text and languages
The text the component shows, in English. It shows another language when the app adds one with addTranslations, under todo-list, and the nearest lang asks for it; any message not translated stays in English. {0}, {1}… stand for the values a message carries. Languages guide.
| Key | English | Values |
|---|---|---|
noTasksYet | No tasks yet | — |
allDone | All done. Nice work. | — |
done | {0} of {1} done | {0} closed {1} total |
urgent | {0} urgent | {0} count |
tasksDone | {0} of {1} tasks done | {0} closed {1} total |
undo | Undo | — |
archivedTask | Archived “{0}” | {0} label |
deletedTask | Deleted “{0}” | {0} label |
editedTask | Edited “{0}” | {0} label |
customizeLook | Customize look | — |
listTitle | List title | — |
untitledList | Untitled list | — |
filters | Show | — |
filterAll | All | — |
filterActive | To do | — |
filterDone | Done | — |
emptyList | No tasks yet. Add your first one below. | — |
nothingDone | Nothing crossed off yet. You’ve got this. | — |
everythingDone | Everything’s done. Enjoy the calm. | — |
tasks | Tasks | — |
tasksOf | {0} tasks | {0} heading |
dragToReorder | Drag to reorder | — |
wontDoTask | {0}, won’t do | {0} label |
changeIconFor | Change icon for {0} | {0} label |
nameOf | Name of {0} | {0} label |
noteFor | Note for {0} | {0} label |
notePlaceholder | Add a note: a quantity, an address, a link… | — |
actionsFor | Actions for {0} | {0} label |
swipeArchive | Archive | — |
swipeDelete | Delete | — |
swipeDone | Done | — |
editTask | Edit task | — |
changeIcon | Change icon | — |
addIcon | Add an icon | — |
highlight | Highlight | — |
textColour | Text colour | — |
wontDo | Won’t do | — |
undoWontDo | Undo won’t do | — |
archive | Archive | — |
delete | Delete | — |
deleteKey | Del | — |
noHighlight | No highlight | — |
none | None | — |
defaultTextColour | Default text colour | — |
default | Default | — |
penText | {0} text | {0} name |
iconFor | Icon for {0} | {0} label |
noIcon | No icon | — |
searchIcons | Search icons | — |
searchIconsPlaceholder | Search {0} icons | {0} count |
noIconMatches | No icon matches “{0}”. | {0} query |
iconCategory | {0} | {0} category |
newTask | New task | — |
addPlaceholder | Add a task — a note after a dash | — |
add | Add | — |
archivedCount | Archived · {0} | {0} count |
restore | Restore | — |
restoreTask | Restore {0} | {0} label |
deleteTask | Delete {0} | {0} label |
customizeList | Customize the list | — |
reset | Reset | — |
panelHint | Applies to the whole list. Style one task from its ⋯ menu, or click its icon. | — |
icon | Icon | — |
listIconDialog | Icon of the list | — |
empty | Empty | — |
automatic | Automatic | — |
fromHeading | {0} · from the heading | {0} name |
listIcon | {0} | {0} name |
background | Background | — |
backgroundN | Background {0} | {0} position |
palette | Palette | — |
paletteN | Palette {0} | {0} position |
fromTheme | From the theme | — |
doneMark | Done mark | — |
tick | Tick | — |
cross | Cross | — |
density | Density | — |
cozy | Cozy | — |
compact | Compact | — |
progress | Progress | — |
progressRing | Ring | — |
progressBar | Bar | — |
progressHero | Hero | — |
progressNone | None | — |
closePanel | Close | — |
penN | Pen {0} | {0} position |
highlighterN | Highlighter {0} | {0} position |
defaultPen | — | {0} position |
defaultHighlight | — | {0} position |
defaultBackground | — | {0} position |
defaultPalette | — | {0} position |