@conduction/nextcloud-vue 2.76.0 → 2.78.0

package/dist/esm/nextcloud-vue.css

@@ -502,6 +502,14 @@
 	color: var(--color-main-text);
 	opacity: 1;
 }
+
+/* ---- Status pills (screens-cell-pill-parity) ---------------------------- */
+/* The board draws a primary pill in the deep primary ink on the light primary
+   ground ("Verzoek", "Nieuw"); the default look keeps the brighter
+   primary-element text. The other tones already match the board. */
+.cn-look-board .cn-status-badge--primary:not(.cn-status-badge--solid):not(.cn-look-nextcloud *) {
+	color: var(--color-primary-element-light-text);
+}
 /*
  * The board dialog (screens-dialog-parity, canon section 5).
  *
@@ -1192,6 +1200,42 @@
 	margin-inline-start: 0;
 }
 
+/* The header buttons keep the board's button under a theme that styles every
+   secondary or primary button with `!important` (the nldesign theme: a
+   primary border, 8px 16px padding): Download and the Actions menu are 40px,
+   a grey border on the main background (PqTickets, DqZaken), the primary
+   button is the primary fill without a border. The buildiq square is not a
+   direct child button and keeps its own rule. */
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .button-vue--secondary,
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .action-item .button-vue {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 14px !important;
+	border: 1px solid var(--color-border-dark) !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-main-background) !important;
+	color: var(--color-main-text) !important;
+}
+
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .button-vue--secondary:hover,
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .action-item .button-vue:hover {
+	background: var(--color-background-hover) !important;
+}
+
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .button-vue--primary {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 16px !important;
+	border: 0 !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-primary-element) !important;
+	color: var(--color-primary-element-text) !important;
+}
+
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .button-vue--primary:hover {
+	background: var(--color-primary-element-hover) !important;
+}
+
 /* ----------------------------------------------------------------- toolbar */
 
 /* No band, no padding, no radius. The DOM is already in reading order (row 1,
@@ -2198,9 +2242,64 @@
 	background-color: var(--color-background-hover);
 }
 
-.cn-table-sort-indicator {
-	margin-inline-start: var(--default-grid-baseline);
-	opacity: 0.6;
+/* The sort control: a real button that looks like the header text, the label
+   followed by a 14px chevron 4px after it (the "Wettelijke termijn" header on
+   the DqWooVerzoeken board). Selector scoped under the table so it outranks
+   Nextcloud's own `button` rule, which would otherwise give it a border, a
+   fill, a 34px min-height and a margin. */
+.cn-data-table th .cn-table-header__sort {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	max-width: 100%;
+	min-width: 0;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: var(--border-radius, 4px);
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	font-weight: inherit;
+	text-align: start;
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.cn-data-table th .cn-table-header__sort:hover,
+.cn-data-table th .cn-table-header__sort:focus {
+	background: transparent;
+}
+
+.cn-data-table th .cn-table-header__sort:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
+}
+
+.cn-data-table th .cn-table-header__sort > :first-child {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* The chevron. Unsorted columns show a pale down chevron, so every sortable
+   column says it sorts; the sorted column shows the direction at full text
+   colour. The direction is also in the header's `aria-sort`. */
+.cn-table-header__chevron {
+	display: inline-flex;
+	flex: none;
+	color: var(--color-main-text);
+}
+
+.cn-table-header__chevron--idle {
+	color: var(--color-text-maxcontrast);
+	opacity: 0.5;
+}
+
+.cn-data-table th.cn-table-header--sortable:hover .cn-table-header__chevron--idle,
+.cn-data-table th .cn-table-header__sort:focus-visible .cn-table-header__chevron--idle {
+	opacity: 1;
 }
 
 /* A column carrying a `description` gets a dotted underline — the long-standing
@@ -2216,15 +2315,12 @@
 	cursor: help;
 }
 
-.cn-data-table th.cn-table-header--sortable:focus-visible {
-	outline: 2px solid var(--color-main-text);
-	outline-offset: -2px;
-}
-
-/* Header filter button (CnDataTable `filterable`). 24px hit area with the
-   16px icon; the filled icon plus the primary colour marks an active filter,
-   so the state never rests on colour alone. */
-.cn-table-header__filter {
+/* Header filter button (CnDataTable `filterable`): a 14px funnel directly
+   after the sort chevron, in a 24px hit area. Muted with no filter set; with
+   a filter set it takes the dark primary and a dot, so the state never rests
+   on colour alone. */
+.cn-data-table th .cn-table-header__filter {
+	position: relative;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -2232,7 +2328,7 @@
 	min-width: 24px;
 	height: 24px;
 	min-height: 24px;
-	margin: 0 0 0 4px;
+	margin: 0 0 0 2px;
 	padding: 0;
 	border: none;
 	border-radius: var(--border-radius, 4px);
@@ -2242,18 +2338,31 @@
 	cursor: pointer;
 }
 
-.cn-table-header__filter:hover {
+.cn-data-table th .cn-table-header__filter:hover {
 	background-color: var(--color-background-hover);
 	color: var(--color-main-text);
 }
 
-.cn-table-header__filter:focus-visible {
+.cn-data-table th .cn-table-header__filter:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 0;
 }
 
-.cn-table-header__filter--active {
-	color: var(--color-primary-element);
+.cn-data-table th .cn-table-header__filter--active,
+.cn-data-table th .cn-table-header__filter--active:hover {
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+}
+
+/* The active-filter dot, on the funnel's top right. */
+.cn-table-header__filter-dot {
+	position: absolute;
+	inset-block-start: 3px;
+	inset-inline-end: 3px;
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background-color: var(--color-primary-element);
+	pointer-events: none;
 }
 
 /* Active header filters above the table, one removable chip each. */
@@ -3281,6 +3390,57 @@ a.cn-kpi-card--stacked:focus-visible {
 	gap: 6px;
 }
 
+/* A linked board tile is one link: the label is not underlined link text, in
+   any layout (screens-stat-tile-parity). The NL Design theme underlines every
+   `a` with `!important`, so the opt-out needs it too. */
+a.cn-kpi-card--board,
+a.cn-kpi-card--board:hover,
+a.cn-kpi-card--board:focus-visible,
+a.cn-kpi-card--board * {
+	text-decoration: none !important;
+}
+
+/* `content.iconPlacement: "end"` (DqDashboard): label left, the icon in a
+   32px circle right, tinted by the tile's state. */
+.cn-kpi-card--board .cn-kpi-card__title--badge-end {
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.cn-kpi-card__badge {
+	display: inline-flex;
+	flex: 0 0 auto;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	margin-inline-start: auto;
+	border-radius: 50%;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+	background: var(--color-primary-element-light, color-mix(in srgb, var(--color-primary-element) 12%, transparent));
+}
+
+.cn-kpi-card__badge svg {
+	width: 18px;
+	height: 18px;
+	fill: currentcolor;
+}
+
+.cn-kpi-card__badge--success {
+	color: var(--color-text-success, var(--color-success-text));
+	background: color-mix(in srgb, var(--color-text-success, var(--color-success-text)) 12%, var(--color-main-background));
+}
+
+.cn-kpi-card__badge--warning {
+	color: var(--color-element-warning, var(--color-warning-text));
+	background: color-mix(in srgb, var(--color-element-warning, var(--color-warning-text)) 12%, var(--color-main-background));
+}
+
+.cn-kpi-card__badge--error {
+	color: var(--color-text-error, var(--color-error-text));
+	background: color-mix(in srgb, var(--color-text-error, var(--color-error-text)) 10%, var(--color-main-background));
+}
+
 .cn-kpi-card__glyph {
 	display: inline-flex;
 	flex: 0 0 auto;
@@ -3527,6 +3687,15 @@ a.cn-kpi-card--stacked:focus-visible {
    @conduction/nextcloud-vue — Status Badge
    ======================================== */
 
+/* The two board tones without a Nextcloud colour role (screens-cell-pill-parity).
+   A theme may redefine them; the six role variants below use Nextcloud's own. */
+:root {
+	--cn-status-purple-bg: #e8e6f6;
+	--cn-status-purple-text: #4a3f8f;
+	--cn-status-teal-bg: #e3f1f3;
+	--cn-status-teal-text: #1d5e66;
+}
+
 .cn-status-badge {
 	display: inline-flex;
 	align-items: center;
@@ -3576,6 +3745,18 @@ a.cn-kpi-card--stacked:focus-visible {
 	color: var(--color-info-text, var(--color-info, #0082c9));
 }
 
+/* Work in progress ("In behandeling"), a board tone. */
+.cn-status-badge--purple {
+	background-color: var(--cn-status-purple-bg);
+	color: var(--cn-status-purple-text);
+}
+
+/* Handed on ("Omgezet naar een zaak"), a board tone. */
+.cn-status-badge--teal {
+	background-color: var(--cn-status-teal-bg);
+	color: var(--cn-status-teal-text);
+}
+
 /* Solid variants — solid background with white text for use on colored backgrounds */
 .cn-status-badge--solid.cn-status-badge--default {
 	background-color: var(--color-background-dark);
@@ -3606,6 +3787,16 @@ a.cn-kpi-card--stacked:focus-visible {
 	background-color: var(--color-info, #0082c9);
 	color: white;
 }
+
+.cn-status-badge--solid.cn-status-badge--purple {
+	background-color: var(--cn-status-purple-text);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--teal {
+	background-color: var(--cn-status-teal-text);
+	color: white;
+}
 /* ========================================
    @conduction/nextcloud-vue — Layout & Filter Utility Styles
    ======================================== */
@@ -5503,12 +5694,26 @@ a.cn-kpi-card--stacked:focus-visible {
 
 /* ---- Folder tabs ------------------------------------------------------- */
 
+/* The strip draws no line of its own (design-system pull request 147). The card under it
+   carries its full border, top included, so the top-right corner is the
+   card's own rounded corner instead of a strip rule running straight past it.
+   The open tab overlaps that top border by 1px (the nav's -1px margin) and
+   paints over it, so it flows into the card as a folder tab. */
 .cn-look-board .cn-tabs--board .cn-tabs__bar {
-	border-bottom: 1px solid var(--color-border-dark);
+	border-bottom: none;
 	gap: 4px;
+	position: relative;
 }
 
+.cn-look-board .cn-tabs.cn-tabs--board .cn-tabs__bar::after {
+	content: none;
+}
+
+/* Tabs sit on the card's top edge; only the open tab reaches 1px further
+   down (min-height 35px below), over the card's top border. Top-aligned so
+   the inactive tabs do not stretch to the open tab's height. */
 .cn-look-board .cn-tabs--board .cn-tabs__nav {
+	align-items: flex-start;
 	gap: 4px;
 }
 
@@ -5529,7 +5734,11 @@ a.cn-kpi-card--stacked:focus-visible {
 	border-bottom: 1px solid var(--color-main-background);
 	border-top: 1px solid var(--color-border-dark);
 	font-weight: 700;
+	min-height: 35px;
+	padding-bottom: 9px;
 	padding-top: 8px;
+	position: relative;
+	z-index: 1;
 }
 
 /* The count: a grey, borderless 20px badge 8px after the label. */
@@ -5566,10 +5775,30 @@ a.cn-kpi-card--stacked:focus-visible {
 .cn-look-board .cn-tabs--board .cn-tabs__content > .cn-tab > :first-child .cn-widget-wrapper,
 .cn-look-board .cn-tabs--board .cn-tabs__content > .cn-tab > .cn-widget-wrapper,
 .cn-look-board .cn-tabs--board .cn-tabs__content > .cn-tab > .cn-detail-card {
-	border-top: none;
+	border-top: 1px solid var(--color-border);
+	border-radius: 0 12px 12px 12px;
+}
+
+/* A CnTabsWidget panel is the card itself: the same full border, so it joins
+   the open tab the same way. The top-left stays square under the first tab. */
+.cn-look-board .cn-tabs--board.cn-tabs-widget__tabs .cn-tabs__content {
+	border: 1px solid var(--color-border);
 	border-radius: 0 12px 12px 12px;
 }
 
+/* A panel of CnTabsWidget is the content block itself: the open tab flows
+   straight into it. The widget in the panel renders chromeless, but the board
+   card rule below (and the first-card rule above) used to give its wrapper a
+   border and a 12px radius again, so a second card sat inside the panel. Its
+   left edge ran down from the open tab and its rounded top-right drew a line
+   across the top right of the content block, where DqZaak shows one sheet.
+   Same specificity as the first-card rule and later, so it wins on order. */
+.cn-look-board .cn-tabs--board.cn-tabs-widget__tabs .cn-tabs__content .cn-widget-wrapper.cn-widget-wrapper--chromeless {
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+}
+
 /* ---- Body cards and side cards ----------------------------------------- */
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper,
@@ -9019,8 +9248,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .cn-cell-renderer__date--error[data-v-37d7b88f] {
 	color: var(--color-text-error, var(--color-error-text));
 }
+
+/* The text variant, not the fill: from Nextcloud 32 `--color-success` is a
+   background colour and too pale for a 16px glyph on a light theme. */
 .cn-cell-renderer__icon--success[data-v-37d7b88f] {
-	color: var(--color-success);
+	color: var(--color-text-success, var(--color-success-text, var(--color-success)));
 }
 .cn-cell-renderer__swatch-wrap[data-v-37d7b88f] {
 	display: inline-flex;
@@ -9356,9 +9588,64 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	background-color: var(--color-background-hover);
 }
 
-.cn-table-sort-indicator {
-	margin-inline-start: var(--default-grid-baseline);
-	opacity: 0.6;
+/* The sort control: a real button that looks like the header text, the label
+   followed by a 14px chevron 4px after it (the "Wettelijke termijn" header on
+   the DqWooVerzoeken board). Selector scoped under the table so it outranks
+   Nextcloud's own `button` rule, which would otherwise give it a border, a
+   fill, a 34px min-height and a margin. */
+.cn-data-table th .cn-table-header__sort {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	max-width: 100%;
+	min-width: 0;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: var(--border-radius, 4px);
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	font-weight: inherit;
+	text-align: start;
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.cn-data-table th .cn-table-header__sort:hover,
+.cn-data-table th .cn-table-header__sort:focus {
+	background: transparent;
+}
+
+.cn-data-table th .cn-table-header__sort:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
+}
+
+.cn-data-table th .cn-table-header__sort > :first-child {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* The chevron. Unsorted columns show a pale down chevron, so every sortable
+   column says it sorts; the sorted column shows the direction at full text
+   colour. The direction is also in the header's `aria-sort`. */
+.cn-table-header__chevron {
+	display: inline-flex;
+	flex: none;
+	color: var(--color-main-text);
+}
+
+.cn-table-header__chevron--idle {
+	color: var(--color-text-maxcontrast);
+	opacity: 0.5;
+}
+
+.cn-data-table th.cn-table-header--sortable:hover .cn-table-header__chevron--idle,
+.cn-data-table th .cn-table-header__sort:focus-visible .cn-table-header__chevron--idle {
+	opacity: 1;
 }
 
 /* A column carrying a `description` gets a dotted underline — the long-standing
@@ -9374,15 +9661,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	cursor: help;
 }
 
-.cn-data-table th.cn-table-header--sortable:focus-visible {
-	outline: 2px solid var(--color-main-text);
-	outline-offset: -2px;
-}
-
-/* Header filter button (CnDataTable `filterable`). 24px hit area with the
-   16px icon; the filled icon plus the primary colour marks an active filter,
-   so the state never rests on colour alone. */
-.cn-table-header__filter {
+/* Header filter button (CnDataTable `filterable`): a 14px funnel directly
+   after the sort chevron, in a 24px hit area. Muted with no filter set; with
+   a filter set it takes the dark primary and a dot, so the state never rests
+   on colour alone. */
+.cn-data-table th .cn-table-header__filter {
+	position: relative;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -9390,7 +9674,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	min-width: 24px;
 	height: 24px;
 	min-height: 24px;
-	margin: 0 0 0 4px;
+	margin: 0 0 0 2px;
 	padding: 0;
 	border: none;
 	border-radius: var(--border-radius, 4px);
@@ -9400,18 +9684,31 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	cursor: pointer;
 }
 
-.cn-table-header__filter:hover {
+.cn-data-table th .cn-table-header__filter:hover {
 	background-color: var(--color-background-hover);
 	color: var(--color-main-text);
 }
 
-.cn-table-header__filter:focus-visible {
+.cn-data-table th .cn-table-header__filter:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 0;
 }
 
-.cn-table-header__filter--active {
-	color: var(--color-primary-element);
+.cn-data-table th .cn-table-header__filter--active,
+.cn-data-table th .cn-table-header__filter--active:hover {
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+}
+
+/* The active-filter dot, on the funnel's top right. */
+.cn-table-header__filter-dot {
+	position: absolute;
+	inset-block-start: 3px;
+	inset-inline-end: 3px;
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background-color: var(--color-primary-element);
+	pointer-events: none;
 }
 
 /* Active header filters above the table, one removable chip each. */
@@ -14188,12 +14485,55 @@ button.cn-files-card__open[data-v-46f7e3c9]:hover {
 	flex-direction: column;
 	gap: 8px;
 	min-width: 0;
+	position: relative;
 	border-radius: var(--border-radius-large, 8px);
 }
 .cn-files-browser--dragging[data-v-f5bdd9e2] {
 	outline: 2px dashed var(--color-primary-element);
 	outline-offset: 4px;
 }
+.cn-files-browser__drop-overlay[data-v-f5bdd9e2] {
+	position: absolute;
+	inset: 0;
+	z-index: 2;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+	padding: 24px;
+	box-sizing: border-box;
+	border: 2px dashed var(--color-primary-element);
+	border-radius: var(--border-radius-large, 8px);
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text, var(--color-main-text));
+	text-align: center;
+	pointer-events: none;
+}
+.cn-files-browser__drop-icon[data-v-f5bdd9e2] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 56px;
+	height: 56px;
+	border-radius: 50%;
+	background: var(--color-main-background);
+	color: var(--color-primary-element);
+}
+.cn-files-browser__drop-label[data-v-f5bdd9e2] {
+	font-size: 20px;
+	font-weight: 700;
+}
+.cn-files-browser__drop-hint[data-v-f5bdd9e2] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 0;
+	padding-top: 12px;
+	border-top: 1px solid var(--color-border);
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
 .cn-files-browser__bar[data-v-f5bdd9e2] {
 	display: flex;
 	align-items: center;
@@ -20622,6 +20962,57 @@ a.cn-kpi-card--stacked:focus-visible {
 	gap: 6px;
 }
 
+/* A linked board tile is one link: the label is not underlined link text, in
+   any layout (screens-stat-tile-parity). The NL Design theme underlines every
+   `a` with `!important`, so the opt-out needs it too. */
+a.cn-kpi-card--board,
+a.cn-kpi-card--board:hover,
+a.cn-kpi-card--board:focus-visible,
+a.cn-kpi-card--board * {
+	text-decoration: none !important;
+}
+
+/* `content.iconPlacement: "end"` (DqDashboard): label left, the icon in a
+   32px circle right, tinted by the tile's state. */
+.cn-kpi-card--board .cn-kpi-card__title--badge-end {
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.cn-kpi-card__badge {
+	display: inline-flex;
+	flex: 0 0 auto;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	margin-inline-start: auto;
+	border-radius: 50%;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+	background: var(--color-primary-element-light, color-mix(in srgb, var(--color-primary-element) 12%, transparent));
+}
+
+.cn-kpi-card__badge svg {
+	width: 18px;
+	height: 18px;
+	fill: currentcolor;
+}
+
+.cn-kpi-card__badge--success {
+	color: var(--color-text-success, var(--color-success-text));
+	background: color-mix(in srgb, var(--color-text-success, var(--color-success-text)) 12%, var(--color-main-background));
+}
+
+.cn-kpi-card__badge--warning {
+	color: var(--color-element-warning, var(--color-warning-text));
+	background: color-mix(in srgb, var(--color-element-warning, var(--color-warning-text)) 12%, var(--color-main-background));
+}
+
+.cn-kpi-card__badge--error {
+	color: var(--color-text-error, var(--color-error-text));
+	background: color-mix(in srgb, var(--color-text-error, var(--color-error-text)) 10%, var(--color-main-background));
+}
+
 .cn-kpi-card__glyph {
 	display: inline-flex;
 	flex: 0 0 auto;
@@ -26339,6 +26730,15 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
    @conduction/nextcloud-vue — Status Badge
    ======================================== */
 
+/* The two board tones without a Nextcloud colour role (screens-cell-pill-parity).
+   A theme may redefine them; the six role variants below use Nextcloud's own. */
+:root {
+	--cn-status-purple-bg: #e8e6f6;
+	--cn-status-purple-text: #4a3f8f;
+	--cn-status-teal-bg: #e3f1f3;
+	--cn-status-teal-text: #1d5e66;
+}
+
 .cn-status-badge {
 	display: inline-flex;
 	align-items: center;
@@ -26388,6 +26788,18 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
 	color: var(--color-info-text, var(--color-info, #0082c9));
 }
 
+/* Work in progress ("In behandeling"), a board tone. */
+.cn-status-badge--purple {
+	background-color: var(--cn-status-purple-bg);
+	color: var(--cn-status-purple-text);
+}
+
+/* Handed on ("Omgezet naar een zaak"), a board tone. */
+.cn-status-badge--teal {
+	background-color: var(--cn-status-teal-bg);
+	color: var(--cn-status-teal-text);
+}
+
 /* Solid variants — solid background with white text for use on colored backgrounds */
 .cn-status-badge--solid.cn-status-badge--default {
 	background-color: var(--color-background-dark);
@@ -26419,6 +26831,16 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
 	color: white;
 }
 
+.cn-status-badge--solid.cn-status-badge--purple {
+	background-color: var(--cn-status-purple-text);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--teal {
+	background-color: var(--cn-status-teal-text);
+	color: white;
+}
+
 
 /*
  * The card itself — its box, body stack, icon circle, title and value
@@ -32093,8 +32515,42 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 }
 
 
-.cn-favourite-toggle__star[data-v-836dad16] {
-	color: var(--color-warning);
+.cn-follow-toggle[data-v-eec896e2] {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+}
+.cn-follow-toggle__on[data-v-eec896e2] {
+	color: var(--color-primary-element);
+}
+.cn-follow-toggle__popover[data-v-eec896e2] {
+	min-width: 260px;
+	padding: 12px;
+}
+.cn-follow-toggle__list[data-v-eec896e2] {
+	list-style: none;
+	margin: 0 0 8px;
+	padding: 0;
+}
+.cn-follow-toggle__row[data-v-eec896e2] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 4px 0;
+}
+.cn-follow-toggle__who[data-v-eec896e2] {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+.cn-follow-toggle__since[data-v-eec896e2] {
+	color: var(--color-text-maxcontrast);
+	font-size: var(--font-size-small, 13px);
+}
+.cn-follow-toggle__error[data-v-eec896e2] {
+	margin: 8px 0 0;
+	color: var(--color-error-text);
 }
 
 
@@ -34239,42 +34695,6 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 }
 
 
-.cn-follow-toggle[data-v-eec896e2] {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-}
-.cn-follow-toggle__popover[data-v-eec896e2] {
-	min-width: 260px;
-	padding: 12px;
-}
-.cn-follow-toggle__list[data-v-eec896e2] {
-	list-style: none;
-	margin: 0 0 8px;
-	padding: 0;
-}
-.cn-follow-toggle__row[data-v-eec896e2] {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 4px 0;
-}
-.cn-follow-toggle__who[data-v-eec896e2] {
-	display: flex;
-	flex-direction: column;
-	flex: 1 1 auto;
-	min-width: 0;
-}
-.cn-follow-toggle__since[data-v-eec896e2] {
-	color: var(--color-text-maxcontrast);
-	font-size: var(--font-size-small, 13px);
-}
-.cn-follow-toggle__error[data-v-eec896e2] {
-	margin: 8px 0 0;
-	color: var(--color-error-text);
-}
-
-
 .cn-lifecycle-actions[data-v-a62ad362] {
 	display: flex;
 	flex-wrap: wrap;
@@ -35948,6 +36368,11 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 }
 
 
+.cn-favourite-toggle__star[data-v-836dad16] {
+	color: var(--color-warning);
+}
+
+
 .cn-journey-review-list__items[data-v-d3c04832] {
 	list-style: none;
 	margin: 8px 0 0;