@conduction/nextcloud-vue 2.62.0 → 2.64.0

package/dist/esm/nextcloud-vue.css

@@ -185,7 +185,7 @@
 .cn-data-table th,
 .cn-data-table td {
 	padding: calc(3 * var(--default-grid-baseline));
-	text-align: left;
+	text-align: start;
 	border-bottom: 1px solid var(--color-border);
 	vertical-align: middle;
 	max-width: var(--cn-table-cell-max-width, 22rem);
@@ -204,6 +204,18 @@
 	white-space: normal;
 }
 
+/* The secondary line of a cell (`columns[].secondary`): muted, smaller, on its
+   own line under the value. Theme hooks: --cn-table-secondary-size and
+   --cn-table-secondary-color. */
+.cn-data-table .cn-table-cell__secondary {
+	display: block;
+	color: var(--cn-table-secondary-color, var(--color-text-maxcontrast));
+	font-size: var(--cn-table-secondary-size, 0.9em);
+	line-height: 1.35;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 /* Back to wrapping, for a column holding prose rather than a label:
    `columns: [{ key: 'description', cellClass: 'cn-cell--wrap' }]`. */
 .cn-data-table th.cn-cell--wrap,
@@ -265,7 +277,7 @@
 }
 
 .cn-data-table td.cn-cell--end {
-	text-align: right;
+	text-align: end;
 	white-space: nowrap;
 }
 
@@ -303,7 +315,7 @@
 }
 
 .cn-table-sort-indicator {
-	margin-left: var(--default-grid-baseline);
+	margin-inline-start: var(--default-grid-baseline);
 	opacity: 0.6;
 }
 
@@ -325,6 +337,87 @@
 	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 {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	min-width: 24px;
+	height: 24px;
+	min-height: 24px;
+	margin: 0 0 0 4px;
+	padding: 0;
+	border: none;
+	border-radius: var(--border-radius, 4px);
+	background: transparent;
+	color: var(--color-text-maxcontrast);
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.cn-table-header__filter:hover {
+	background-color: var(--color-background-hover);
+	color: var(--color-main-text);
+}
+
+.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);
+}
+
+/* Active header filters above the table, one removable chip each. */
+.cn-data-table__filter-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	margin: 0 0 8px;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-data-table__filter-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 2px 4px 2px 10px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-pill, 16px);
+	background-color: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-data-table__filter-chip-remove {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	min-width: 24px;
+	height: 24px;
+	min-height: 24px;
+	margin: 0;
+	padding: 0;
+	border: none;
+	border-radius: 50%;
+	background: transparent;
+	color: var(--color-main-text);
+	cursor: pointer;
+}
+
+.cn-data-table__filter-chip-remove:hover {
+	background-color: var(--color-background-hover);
+}
+
+.cn-data-table__filter-chip-remove:focus-visible {
+	outline: 2px solid var(--color-main-text);
+}
+
 /* Multi-column sort priority badge (1, 2, 3), rendered only when two or more rendered, sortable columns are sorted. */
 .cn-table-sort-badge {
 	display: inline-flex;
@@ -332,7 +425,7 @@
 	justify-content: center;
 	min-width: 14px;
 	height: 14px;
-	margin-left: 2px;
+	margin-inline-start: 2px;
 	padding: 0 3px;
 	border-radius: 7px;
 	background-color: var(--color-primary-element);
@@ -397,7 +490,7 @@
 
 .cn-table-col--icon {
 	width: 40px;
-	padding-right: 0;
+	padding-inline-end: 0;
 	text-align: center;
 	color: var(--color-text-maxcontrast);
 }
@@ -460,7 +553,7 @@
 
 .viewTable { width: 100%; border-collapse: collapse; background-color: var(--color-main-background); }
 
-.viewTable th, .viewTable td { padding: calc(3 * var(--default-grid-baseline)); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
+.viewTable th, .viewTable td { padding: calc(3 * var(--default-grid-baseline)); text-align: start; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
 
 .viewTable th { background: var(--color-background-hover); font-weight: 500; color: var(--color-text-maxcontrast); background-color: var(--color-background-dark); }
 
@@ -956,7 +1049,7 @@
 	padding: var(--cn-kpi-padding-flat, 8px);
 	box-sizing: border-box;
 	overflow: hidden;
-	text-align: left;
+	text-align: start;
 	text-decoration: none;
 	color: inherit;
 	background: transparent;
@@ -1071,6 +1164,29 @@
 	white-space: nowrap;
 }
 
+/* A caption coloured by a rule (`captionVariant` / `overrides[].captionVariant`):
+   "1 due today" in the error colour. Foreground tokens, which stay readable in
+   dark mode. */
+.cn-kpi-card__label--primary {
+	color: var(--color-primary-element);
+	font-weight: 600;
+}
+
+.cn-kpi-card__label--success {
+	color: var(--color-text-success, var(--color-success-text));
+	font-weight: 600;
+}
+
+.cn-kpi-card__label--warning {
+	color: var(--color-element-warning, var(--color-warning-text));
+	font-weight: 600;
+}
+
+.cn-kpi-card__label--error {
+	color: var(--color-text-error, var(--color-error-text));
+	font-weight: 600;
+}
+
 /* Semantic variants. Each re-points the ONE accent token, so the icon tint
    and the number move together by construction — there is no second place to
    forget. The inline KPI below shares the same modifiers for the same reason:
@@ -2584,6 +2700,55 @@
 .cn-dashboard-list__item:hover {
 	background: var(--color-background-hover);
 }
+
+/* "Install <app>" placeholder in a widget whose app is missing.
+ *
+ * NcEmptyContent centres its content with `justify-content: center`. In a
+ * two-row dashboard tile (about 150px inside an `overflow: hidden` wrapper)
+ * the icon, name, description and button are taller than the tile, and plain
+ * `center` overflows on BOTH sides, so the top ran out of the widget and the
+ * name was cut off. `safe center` falls back to the start edge when the
+ * content does not fit, the spacing is compact, and what still does not fit
+ * scrolls instead of being clipped. Shared by CnDashboardPage and
+ * CnDetailWidgetHost (`cn-requires-app`). The class is doubled to outrank
+ * NcEmptyContent's own scoped rules (`.empty-content[data-v-…]`) whatever
+ * order the stylesheets load in. */
+.cn-requires-app.cn-requires-app.empty-content,
+.cn-requires-app.cn-requires-app .empty-content {
+	justify-content: safe center;
+	min-height: 0;
+	max-height: 100%;
+	overflow: auto;
+	margin: 0;
+	padding: calc(2 * var(--default-grid-baseline, 4px));
+	gap: var(--default-grid-baseline, 4px);
+	box-sizing: border-box;
+}
+
+.cn-requires-app.cn-requires-app .empty-content__icon {
+	width: auto;
+	height: auto;
+	min-height: 0;
+	margin: 0;
+	opacity: 0.7;
+}
+
+.cn-requires-app.cn-requires-app .empty-content__name {
+	margin: 0;
+	font-size: var(--default-font-size, 15px);
+	font-weight: 600;
+	text-align: center;
+}
+
+.cn-requires-app.cn-requires-app .empty-content__description {
+	margin: 0;
+	text-align: center;
+	font-size: 0.9em;
+}
+
+.cn-requires-app.cn-requires-app .empty-content__action {
+	margin-top: var(--default-grid-baseline, 4px);
+}
 /* ========================================
    @conduction/nextcloud-vue — CnDetailPage Styles
    ======================================== */
@@ -2594,6 +2759,12 @@
 	position: relative;
 }
 
+/* The breadcrumb line above the header (`config.breadcrumb`). */
+.cn-detail-page__breadcrumbs {
+	margin-bottom: calc(2 * var(--default-grid-baseline));
+	color: var(--color-text-maxcontrast);
+}
+
 /* Header */
 .cn-detail-page__header {
 	display: flex;
@@ -2692,6 +2863,25 @@
 	flex-shrink: 0;
 }
 
+/* Every control in the header sits on one line at one height. The lifecycle
+   bar carries `margin: 0 0 8px` for its place above a page body; in the
+   header that margin pushed its buttons up and made the row 8px taller, so
+   the Edit button beside it read as the bigger one. A consumer's actions
+   component can bring its own margins too, so they are reset here as well. */
+.cn-detail-page .cn-detail-page__header-actions .cn-lifecycle-actions {
+	margin: 0;
+	flex-wrap: nowrap;
+}
+
+.cn-detail-page .cn-detail-page__header-actions > * {
+	margin-block: 0;
+}
+
+.cn-detail-page .cn-detail-page__header-actions .button-vue {
+	min-height: var(--default-clickable-area);
+	block-size: var(--default-clickable-area);
+}
+
 /* The sentence a refused lock acquire left behind, under the locked banner. */
 .cn-detail-page__lock-refusal {
 	margin: 0 0 calc(3 * var(--default-grid-baseline));
@@ -2742,7 +2932,7 @@
 
 .cn-detail-page__stats-table thead th {
 	padding: calc(1.5 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
-	text-align: left;
+	text-align: start;
 	font-weight: 600;
 	font-size: 0.9em;
 	color: var(--color-text-maxcontrast);
@@ -2767,7 +2957,7 @@
 }
 
 .cn-detail-page__stats-cell--indented {
-	padding-left: calc(5 * var(--default-grid-baseline)) !important;
+	padding-inline-start: calc(5 * var(--default-grid-baseline)) !important;
 }
 
 .cn-detail-page__stats-cell--center {
@@ -2775,7 +2965,7 @@
 }
 
 .cn-detail-page__stats-cell--right {
-	text-align: right;
+	text-align: end;
 }
 
 /* Body & content */
@@ -2909,7 +3099,7 @@
 
 .cn-detail-page__sidebar-toggle {
 	position: fixed;
-	right: calc(5 * var(--default-grid-baseline));
+	inset-inline-end: calc(5 * var(--default-grid-baseline));
 	top: 80px;
 	z-index: 10;
 }
@@ -5959,6 +6149,101 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 
 
+.cn-column-filter[data-v-2cb54356] {
+	z-index: 10000;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	box-sizing: border-box;
+	max-height: 60vh;
+	overflow-y: auto;
+	padding: 12px;
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-large, 8px);
+	box-shadow: 0 2px 8px var(--color-box-shadow);
+	font-weight: normal;
+	text-align: start;
+}
+.cn-column-filter__heading[data-v-2cb54356] {
+	margin: 0;
+	font-weight: bold;
+}
+.cn-column-filter__options[data-v-2cb54356] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin: 0;
+	padding: 0;
+	border: none;
+}
+.cn-column-filter__option[data-v-2cb54356] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-height: 32px;
+	cursor: pointer;
+}
+.cn-column-filter__range[data-v-2cb54356] {
+	display: flex;
+	gap: 8px;
+}
+.cn-column-filter__field[data-v-2cb54356] {
+	display: flex;
+	flex: 1 1 0;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+.cn-column-filter__label[data-v-2cb54356] {
+	font-size: var(--font-size-small, 13px);
+	color: var(--color-text-maxcontrast);
+}
+.cn-column-filter__input[data-v-2cb54356] {
+	width: 100%;
+	box-sizing: border-box;
+	margin: 0;
+}
+.cn-column-filter__hint[data-v-2cb54356] {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+.cn-column-filter__actions[data-v-2cb54356] {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+}
+.cn-column-filter__button[data-v-2cb54356] {
+	min-height: 34px;
+	padding: 0 12px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-element, 8px);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	cursor: pointer;
+}
+.cn-column-filter__button--primary[data-v-2cb54356] {
+	border-color: var(--color-primary-element);
+	background: var(--color-primary-element);
+	color: var(--color-primary-element-text);
+}
+.cn-column-filter__button[data-v-2cb54356]:focus-visible,
+.cn-column-filter__input[data-v-2cb54356]:focus-visible,
+.cn-column-filter__option input[data-v-2cb54356]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+.cn-column-filter__sr-only[data-v-2cb54356] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+
 .cn-fk-resolve-cell[data-v-471db666] {
 	white-space: nowrap;
 	overflow: hidden;
@@ -6219,7 +6504,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .cn-data-table th,
 .cn-data-table td {
 	padding: calc(3 * var(--default-grid-baseline));
-	text-align: left;
+	text-align: start;
 	border-bottom: 1px solid var(--color-border);
 	vertical-align: middle;
 	max-width: var(--cn-table-cell-max-width, 22rem);
@@ -6238,6 +6523,18 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	white-space: normal;
 }
 
+/* The secondary line of a cell (`columns[].secondary`): muted, smaller, on its
+   own line under the value. Theme hooks: --cn-table-secondary-size and
+   --cn-table-secondary-color. */
+.cn-data-table .cn-table-cell__secondary {
+	display: block;
+	color: var(--cn-table-secondary-color, var(--color-text-maxcontrast));
+	font-size: var(--cn-table-secondary-size, 0.9em);
+	line-height: 1.35;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 /* Back to wrapping, for a column holding prose rather than a label:
    `columns: [{ key: 'description', cellClass: 'cn-cell--wrap' }]`. */
 .cn-data-table th.cn-cell--wrap,
@@ -6299,7 +6596,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 
 .cn-data-table td.cn-cell--end {
-	text-align: right;
+	text-align: end;
 	white-space: nowrap;
 }
 
@@ -6337,7 +6634,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 
 .cn-table-sort-indicator {
-	margin-left: var(--default-grid-baseline);
+	margin-inline-start: var(--default-grid-baseline);
 	opacity: 0.6;
 }
 
@@ -6359,6 +6656,87 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	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 {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	min-width: 24px;
+	height: 24px;
+	min-height: 24px;
+	margin: 0 0 0 4px;
+	padding: 0;
+	border: none;
+	border-radius: var(--border-radius, 4px);
+	background: transparent;
+	color: var(--color-text-maxcontrast);
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.cn-table-header__filter:hover {
+	background-color: var(--color-background-hover);
+	color: var(--color-main-text);
+}
+
+.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);
+}
+
+/* Active header filters above the table, one removable chip each. */
+.cn-data-table__filter-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	margin: 0 0 8px;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-data-table__filter-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 2px 4px 2px 10px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-pill, 16px);
+	background-color: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-data-table__filter-chip-remove {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	min-width: 24px;
+	height: 24px;
+	min-height: 24px;
+	margin: 0;
+	padding: 0;
+	border: none;
+	border-radius: 50%;
+	background: transparent;
+	color: var(--color-main-text);
+	cursor: pointer;
+}
+
+.cn-data-table__filter-chip-remove:hover {
+	background-color: var(--color-background-hover);
+}
+
+.cn-data-table__filter-chip-remove:focus-visible {
+	outline: 2px solid var(--color-main-text);
+}
+
 /* Multi-column sort priority badge (1, 2, 3), rendered only when two or more rendered, sortable columns are sorted. */
 .cn-table-sort-badge {
 	display: inline-flex;
@@ -6366,7 +6744,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	justify-content: center;
 	min-width: 14px;
 	height: 14px;
-	margin-left: 2px;
+	margin-inline-start: 2px;
 	padding: 0 3px;
 	border-radius: 7px;
 	background-color: var(--color-primary-element);
@@ -6431,7 +6809,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 .cn-table-col--icon {
 	width: 40px;
-	padding-right: 0;
+	padding-inline-end: 0;
 	text-align: center;
 	color: var(--color-text-maxcontrast);
 }
@@ -6494,7 +6872,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 .viewTable { width: 100%; border-collapse: collapse; background-color: var(--color-main-background); }
 
-.viewTable th, .viewTable td { padding: calc(3 * var(--default-grid-baseline)); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
+.viewTable th, .viewTable td { padding: calc(3 * var(--default-grid-baseline)); text-align: start; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
 
 .viewTable th { background: var(--color-background-hover); font-weight: 500; color: var(--color-text-maxcontrast); background-color: var(--color-background-dark); }
 
@@ -15141,6 +15519,10 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 	font-size: 0.9em;
 	margin-inline-end: auto;
 }
+.cn-form-dialog__switch-wrapper[data-v-c3eeb0a2] {
+	display: flex;
+	flex-direction: column;
+}
 .cn-form-dialog__form[data-v-c3eeb0a2] {
 	display: flex;
 	flex-direction: column;
@@ -15729,6 +16111,27 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 	flex-shrink: 0;
 }
 
+/* The header's text link (`headerLink`). Theme hooks: --cn-widget-header-link-size
+   and --cn-widget-header-link-weight. */
+.cn-widget-wrapper__header-link[data-v-4dd77f59] {
+	align-self: center;
+	padding: 0 calc(1 * var(--default-grid-baseline));
+	color: var(--color-primary-element);
+	font-size: var(--cn-widget-header-link-size, 14px);
+	font-weight: var(--cn-widget-header-link-weight, 600);
+	text-decoration: none;
+	white-space: nowrap;
+}
+.cn-widget-wrapper__header-link[data-v-4dd77f59]:hover,
+.cn-widget-wrapper__header-link[data-v-4dd77f59]:focus-visible {
+	text-decoration: underline;
+}
+.cn-widget-wrapper__header-link[data-v-4dd77f59]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+	border-radius: var(--border-radius-small, 4px);
+}
+
 /* Every widget's header icon is coloured — `--cn-widget-icon-color` is set on
    the header from titleIconStyle, and defaults to the theme colour if a
    wrapper is ever rendered without it. Material-design-icon components paint
@@ -16428,6 +16831,74 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 	color: var(--color-text-maxcontrast);
 }
 
+/* The bars variant: equal columns, a thin bar per step. Theme hooks:
+   --cn-stages-bar-height, --cn-stages-bar-radius, --cn-stages-bar-done,
+   --cn-stages-bar-current, --cn-stages-bar-todo. */
+.cn-stages-widget__bars[data-v-358fde0f] {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+	grid-auto-flow: column;
+	gap: 8px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.cn-stages-widget__bar-step[data-v-358fde0f] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+}
+.cn-stages-widget__bar[data-v-358fde0f] {
+	display: block;
+	height: var(--cn-stages-bar-height, 6px);
+	border-radius: var(--cn-stages-bar-radius, 3px);
+	background: var(--cn-stages-bar-todo, var(--color-border));
+}
+.cn-stages-widget__bar-step--done .cn-stages-widget__bar[data-v-358fde0f] {
+	background: var(--cn-stages-bar-done, var(--color-primary-element));
+}
+.cn-stages-widget__bar-step--current .cn-stages-widget__bar[data-v-358fde0f] {
+	background: var(--cn-stages-bar-current, var(--color-error));
+}
+.cn-stages-widget__bar-label[data-v-358fde0f] {
+	display: block;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--color-text-maxcontrast);
+	font: inherit;
+	font-size: 14px;
+	text-align: start;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+button.cn-stages-widget__bar-label[data-v-358fde0f] {
+	cursor: pointer;
+}
+button.cn-stages-widget__bar-label[aria-disabled="true"][data-v-358fde0f] {
+	cursor: not-allowed;
+}
+button.cn-stages-widget__bar-label[data-v-358fde0f]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+	border-radius: var(--border-radius-small, 4px);
+}
+.cn-stages-widget__bar-step--done .cn-stages-widget__bar-label[data-v-358fde0f] {
+	color: var(--color-main-text);
+	font-weight: 600;
+}
+.cn-stages-widget__bar-step--current .cn-stages-widget__bar-label[data-v-358fde0f] {
+	color: var(--color-main-text);
+	font-weight: 700;
+}
+.cn-stages-widget__bar-date[data-v-358fde0f] {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
 /* Text for screen readers only. */
 .cn-stages-widget__sr-only[data-v-358fde0f] {
 	position: absolute;
@@ -16605,7 +17076,7 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 	padding: var(--cn-kpi-padding-flat, 8px);
 	box-sizing: border-box;
 	overflow: hidden;
-	text-align: left;
+	text-align: start;
 	text-decoration: none;
 	color: inherit;
 	background: transparent;
@@ -16720,6 +17191,29 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 	white-space: nowrap;
 }
 
+/* A caption coloured by a rule (`captionVariant` / `overrides[].captionVariant`):
+   "1 due today" in the error colour. Foreground tokens, which stay readable in
+   dark mode. */
+.cn-kpi-card__label--primary {
+	color: var(--color-primary-element);
+	font-weight: 600;
+}
+
+.cn-kpi-card__label--success {
+	color: var(--color-text-success, var(--color-success-text));
+	font-weight: 600;
+}
+
+.cn-kpi-card__label--warning {
+	color: var(--color-element-warning, var(--color-warning-text));
+	font-weight: 600;
+}
+
+.cn-kpi-card__label--error {
+	color: var(--color-text-error, var(--color-error-text));
+	font-weight: 600;
+}
+
 /* Semantic variants. Each re-points the ONE accent token, so the icon tint
    and the number move together by construction — there is no second place to
    forget. The inline KPI below shares the same modifiers for the same reason:
@@ -17674,6 +18168,68 @@ to { background-position: -200% 0;
 }
 
 
+.cn-segmented-control[data-v-7b344b4f] {
+	display: inline-flex;
+	gap: 4px;
+	max-width: 100%;
+	padding: 4px;
+	border-radius: var(--border-radius-container, var(--border-radius-large, 10px));
+	background-color: var(--color-background-dark);
+	overflow-x: auto;
+}
+.cn-segmented-control--stretch[data-v-7b344b4f] {
+	display: flex;
+}
+.cn-segmented-control--stretch .cn-segmented-control__option[data-v-7b344b4f] {
+	flex: 1 1 0;
+}
+
+/* The parent class outscores Nextcloud's server rule that gives every plain
+   `button` a margin and a border. */
+.cn-segmented-control .cn-segmented-control__option[data-v-7b344b4f] {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	box-sizing: border-box;
+	min-height: 36px;
+	margin: 0;
+	padding: 0 16px;
+	border: 1px solid transparent;
+	border-radius: var(--border-radius-element, var(--border-radius-large, 8px));
+	background-color: transparent;
+	/* Full-contrast label on every option: the choice is carried by the
+	   raised surface, not by dimming the others. */
+	color: var(--color-main-text);
+	font: inherit;
+	font-weight: 600;
+	white-space: nowrap;
+	cursor: pointer;
+}
+.cn-segmented-control .cn-segmented-control__option[data-v-7b344b4f]:hover {
+	background-color: var(--color-background-hover);
+}
+.cn-segmented-control .cn-segmented-control__option[data-v-7b344b4f]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+
+/* The border survives forced-colours mode, which drops background and shadow. */
+.cn-segmented-control .cn-segmented-control__option--checked[data-v-7b344b4f],
+.cn-segmented-control .cn-segmented-control__option--checked[data-v-7b344b4f]:hover {
+	border-color: var(--color-border-dark);
+	background-color: var(--color-main-background);
+	box-shadow: 0 1px 2px var(--color-box-shadow);
+}
+.cn-segmented-control .cn-segmented-control__option[disabled][data-v-7b344b4f] {
+	cursor: default;
+	opacity: 0.5;
+}
+.cn-segmented-control__count[data-v-7b344b4f] {
+	font-weight: 400;
+}
+
+
 .cn-header-widget[data-v-1b97430f] {
 	width: 100%;
 	height: 100%;
@@ -17685,6 +18241,27 @@ to { background-position: -200% 0;
 	min-height: 0;
 	border-radius: 0;
 }
+
+/* With a view switch the heading and the switch share one row, the switch
+   at the right and bottom-aligned with the heading; on a narrow card the
+   switch wraps under it. */
+.cn-header-widget--with-views[data-v-1b97430f] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	justify-content: space-between;
+	gap: calc(2 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+}
+.cn-header-widget--with-views .cn-header-widget__content[data-v-1b97430f] {
+	flex: 1 1 320px;
+	width: auto;
+}
+.cn-header-widget__views[data-v-1b97430f] {
+	position: relative;
+	z-index: 1;
+	flex: 0 0 auto;
+	padding: 16px;
+}
 .cn-header-widget__date[data-v-1b97430f] {
 	font-size: 14px;
 	line-height: 1.4;
@@ -17746,7 +18323,7 @@ to { background-position: -200% 0;
 	height: 1px;
 	opacity: 0;
 	pointer-events: none;
-	left: -9999px;
+	inset-inline-start: -9999px;
 	top: -9999px;
 }
 @media print {
@@ -18032,6 +18609,83 @@ to { background-position: -200% 0;
 }
 
 
+.cn-timeline-widget[data-v-621fcccf] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+.cn-timeline-widget__title[data-v-621fcccf] {
+	margin: 0;
+	font-size: var(--font-size-large, 1.1em);
+}
+.cn-timeline-widget__loading[data-v-621fcccf] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-timeline-widget__empty[data-v-621fcccf] {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+.cn-timeline-widget__list[data-v-621fcccf] {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.cn-timeline-widget__event[data-v-621fcccf] {
+	position: relative;
+	display: flex;
+	gap: 12px;
+	padding-block-end: 12px;
+}
+
+/* The line between dots: drawn from each dot down to the next event. */
+.cn-timeline-widget__event[data-v-621fcccf]:not(:last-child)::before {
+	content: '';
+	position: absolute;
+	inset-block: 14px 0;
+	inset-inline-start: 5px;
+	border-inline-start: 2px solid var(--color-border-dark);
+}
+.cn-timeline-widget__dot[data-v-621fcccf] {
+	flex: 0 0 auto;
+	width: 12px;
+	height: 12px;
+	margin-block-start: 4px;
+	border-radius: 50%;
+	background-color: var(--color-primary-element);
+}
+
+/* Upcoming: a hollow dot, plus the word "Upcoming" beside the date. */
+.cn-timeline-widget__event--upcoming .cn-timeline-widget__dot[data-v-621fcccf] {
+	box-sizing: border-box;
+	border: 2px solid var(--color-primary-element);
+	background-color: var(--color-main-background);
+}
+.cn-timeline-widget__body[data-v-621fcccf] {
+	min-width: 0;
+}
+.cn-timeline-widget__when[data-v-621fcccf] {
+	font-size: var(--font-size-small, 13px);
+	color: var(--color-text-maxcontrast);
+}
+.cn-timeline-widget__badge[data-v-621fcccf] {
+	margin-inline-start: 8px;
+	font-size: var(--font-size-small, 13px);
+	font-weight: bold;
+	color: var(--color-main-text);
+}
+.cn-timeline-widget__label[data-v-621fcccf] {
+	margin: 0;
+	font-weight: bold;
+}
+.cn-timeline-widget__detail[data-v-621fcccf] {
+	margin: 0;
+	overflow-wrap: anywhere;
+}
+
+
 .cn-object-card[data-v-6f672c8f] {
 	display: flex;
 	gap: 12px;
@@ -23314,6 +23968,17 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 }
 
 
+.cn-admin-action-card__description[data-v-57907ee5] {
+	margin: 0 0 12px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-admin-action-card__footer[data-v-57907ee5] {
+	display: flex;
+	gap: 8px;
+	margin-block: 8px;
+}
+
+
 .cn-version-info__card[data-v-3dc855b2] {
 	background: var(--color-background-hover);
 	border: 1px solid var(--color-border);
@@ -23698,6 +24363,19 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
   padding: 12px;
 }
 
+.cn-choice-cards__cell[data-v-93473002] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-inline-size: 0;
+}
+
+.cn-choice-cards__actions[data-v-93473002] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
 .cn-choice-cards__option[data-v-93473002] {
   position: relative;
   display: block;
@@ -23860,6 +24538,16 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 	padding: 24px 0;
 	color: var(--color-text-maxcontrast);
 }
+.cn-setup-load-result[data-v-75b2078b] {
+	margin: 0;
+	font-size: var(--font-size-small, 13px);
+}
+.cn-setup-load-result--success[data-v-75b2078b] {
+	color: var(--color-success-text, var(--color-success));
+}
+.cn-setup-load-result--error[data-v-75b2078b] {
+	color: var(--color-error-text, var(--color-error));
+}
 .cn-setup-field[data-v-75b2078b] {
 	display: flex;
 	flex-direction: column;
@@ -28690,6 +29378,10 @@ to {
 	padding: 16px;
 	pointer-events: auto;
 }
+.cn-walkthrough__card--docked[data-v-5691d49a] {
+	inset-block-end: 16px;
+	inset-inline-start: 16px;
+}
 .cn-walkthrough__close[data-v-5691d49a] {
 	/* !important beats NcButton's own `position: relative`, which would otherwise
 	   leave the close button in-flow at the card's top-left. */
@@ -32439,6 +33131,70 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 }
 
 
+/* The emblem beside the app name (`nav.brand.emblem`). A theme sets
+   --nldesign-emblem-url for `emblem: true`, and --cn-nav-emblem-size for both. */
+.cn-app-nav__brand-emblem {
+	flex: none;
+	height: var(--cn-nav-emblem-size, 34px);
+	width: auto;
+	object-fit: contain;
+}
+.cn-app-nav__brand-emblem--theme {
+	display: inline-block;
+	width: var(--cn-nav-emblem-size, 34px);
+	background: var(--nldesign-emblem-url) center / contain no-repeat;
+}
+
+/* The solid primary action (`solid: true`, or an action that dispatches):
+   one full-width primary button, as the board draws "New case". */
+.cn-app-nav__primary-action--solid .cn-action-buttons,
+.cn-app-nav__primary-action--solid .cn-action-buttons .button-vue,
+.cn-app-nav__primary-action--solid .button-vue {
+	width: 100%;
+	justify-content: center;
+}
+
+/* The card above the footer entries (`nav.card`). Theme hooks:
+   --cn-nav-card-background and --cn-nav-card-radius. */
+.cn-app-nav__card {
+	display: flex;
+	flex-direction: column;
+	gap: calc(2 * var(--default-grid-baseline));
+	margin: calc(2 * var(--default-grid-baseline));
+	padding: calc(4 * var(--default-grid-baseline));
+	border-radius: var(--cn-nav-card-radius, var(--border-radius-large));
+	background: var(--cn-nav-card-background, var(--color-background-hover));
+}
+.cn-app-nav__card-title {
+	color: var(--color-main-text);
+	font-weight: 700;
+}
+.cn-app-nav__card-text {
+	color: var(--color-text-maxcontrast);
+	line-height: 1.4;
+}
+.cn-app-nav__card-link {
+	align-self: flex-start;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--color-primary-element);
+	font: inherit;
+	font-weight: 600;
+	text-decoration: none;
+	cursor: pointer;
+}
+.cn-app-nav__card-link:hover,
+.cn-app-nav__card-link:focus-visible {
+	text-decoration: underline;
+}
+.cn-app-nav__card-link:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+	border-radius: var(--border-radius-small, 4px);
+}
+
 /* The brand block at the top of the navigation. */
 .cn-app-nav__brand {
 	align-items: center;
@@ -33713,6 +34469,11 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 	margin-bottom: 12px;
 	color: var(--color-text-maxcontrast);
 }
+.cn-app-root__walkthrough-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
 .cn-app-root__integrations-hint {
 	margin-bottom: 12px;
 	color: var(--color-text-maxcontrast);
@@ -34322,68 +35083,6 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 }
 
 
-.cn-segmented-control[data-v-7b344b4f] {
-	display: inline-flex;
-	gap: 4px;
-	max-width: 100%;
-	padding: 4px;
-	border-radius: var(--border-radius-container, var(--border-radius-large, 10px));
-	background-color: var(--color-background-dark);
-	overflow-x: auto;
-}
-.cn-segmented-control--stretch[data-v-7b344b4f] {
-	display: flex;
-}
-.cn-segmented-control--stretch .cn-segmented-control__option[data-v-7b344b4f] {
-	flex: 1 1 0;
-}
-
-/* The parent class outscores Nextcloud's server rule that gives every plain
-   `button` a margin and a border. */
-.cn-segmented-control .cn-segmented-control__option[data-v-7b344b4f] {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	box-sizing: border-box;
-	min-height: 36px;
-	margin: 0;
-	padding: 0 16px;
-	border: 1px solid transparent;
-	border-radius: var(--border-radius-element, var(--border-radius-large, 8px));
-	background-color: transparent;
-	/* Full-contrast label on every option: the choice is carried by the
-	   raised surface, not by dimming the others. */
-	color: var(--color-main-text);
-	font: inherit;
-	font-weight: 600;
-	white-space: nowrap;
-	cursor: pointer;
-}
-.cn-segmented-control .cn-segmented-control__option[data-v-7b344b4f]:hover {
-	background-color: var(--color-background-hover);
-}
-.cn-segmented-control .cn-segmented-control__option[data-v-7b344b4f]:focus-visible {
-	outline: 2px solid var(--color-primary-element);
-	outline-offset: 2px;
-}
-
-/* The border survives forced-colours mode, which drops background and shadow. */
-.cn-segmented-control .cn-segmented-control__option--checked[data-v-7b344b4f],
-.cn-segmented-control .cn-segmented-control__option--checked[data-v-7b344b4f]:hover {
-	border-color: var(--color-border-dark);
-	background-color: var(--color-main-background);
-	box-shadow: 0 1px 2px var(--color-box-shadow);
-}
-.cn-segmented-control .cn-segmented-control__option[disabled][data-v-7b344b4f] {
-	cursor: default;
-	opacity: 0.5;
-}
-.cn-segmented-control__count[data-v-7b344b4f] {
-	font-weight: 400;
-}
-
-
 .cn-brand-stripe[data-v-6fdfa763] {
 	--cn-brand-stripe-first: var(--cn-brand-stripe-ratio-1, 1);
 	--cn-brand-stripe-second: var(--cn-brand-stripe-ratio-2, 1);