@conduction/nextcloud-vue 2.61.0 → 2.63.0

package/dist/nextcloud-vue.css

@@ -325,8 +325,88 @@
 	outline-offset: -2px;
 }
 
-/* Multi-column sort priority badge (1, 2, 3) — only rendered once more than
-   one sort key is active; a single active sort shows the arrow alone. */
+/* 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;
 	align-items: center;
@@ -2585,6 +2665,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
    ======================================== */
@@ -2693,6 +2822,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));
@@ -5960,6 +6108,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;
@@ -6360,8 +6603,88 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	outline-offset: -2px;
 }
 
-/* Multi-column sort priority badge (1, 2, 3) — only rendered once more than
-   one sort key is active; a single active sort shows the arrow alone. */
+/* 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;
 	align-items: center;
@@ -15143,6 +15466,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;
@@ -17513,6 +17840,30 @@ to { background-position: -200% 0;
 	color: inherit;
 }
 
+/* The check failed. Muted text, no fill, no severity colour: it is a note
+   that something is not known, not a warning. */
+.cn-banner-widget--unchecked[data-v-3531692f] {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 8px 12px;
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+	cursor: help;
+}
+
+/* The reason, for assistive technology; sighted readers get the tooltip. */
+.cn-banner-widget__unchecked-reason[data-v-3531692f] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+	border: 0;
+}
+
 /* Attention card. The severity edge is an inset shadow, so it takes no width. */
 .cn-banner-widget--attention[data-v-3531692f] {
 	--cn-banner-accent: var(--color-primary-element);
@@ -18010,6 +18361,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;
@@ -23292,6 +23720,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);
@@ -23676,6 +24115,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;
@@ -23838,6 +24290,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;
@@ -28668,6 +29130,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. */
@@ -31815,6 +32281,13 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 .cn-wiki-page__header[data-v-25a3d3cf] {
 	margin-bottom: 16px;
 }
+
+/* Without a sidebar the title starts at the left edge of the content, under
+   the Nextcloud navigation toggle button (44px wide). Clear it as CnPageHeader
+   does. With a sidebar the tree sits there instead and the title is clear. */
+.cn-wiki-page:not(.cn-wiki-page--has-sidebar) .cn-wiki-page__header[data-v-25a3d3cf] {
+	padding-inline-start: 56px;
+}
 .cn-wiki-page__title[data-v-25a3d3cf] {
 	font-size: 1.6em;
 	margin: 0;
@@ -31874,6 +32347,13 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 .cn-reports-page[data-v-41525752] {
 	padding: 16px;
 }
+
+/* Clear the Nextcloud navigation toggle button (44px wide, absolutely
+   positioned at the left edge of .app-content) plus 12px breathing room, as
+   CnPageHeader does. Only the header shifts; the body keeps the full width. */
+.cn-reports-page__header[data-v-41525752] {
+	padding-inline-start: 56px;
+}
 .cn-reports-page__title[data-v-41525752] {
 	margin: 0 0 4px;
 }
@@ -31930,6 +32410,13 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 	padding: 16px;
 	max-width: 1200px;
 }
+
+/* Clear the Nextcloud navigation toggle button (44px wide, absolutely
+   positioned at the left edge of .app-content) plus 12px breathing room, as
+   CnPageHeader does. Only the header shifts; the body keeps the full width. */
+.cn-store-page__header[data-v-25c8171b] {
+	padding-inline-start: 56px;
+}
 .cn-store-page__heading[data-v-25c8171b] {
 	display: flex;
 	flex-wrap: wrap;
@@ -32019,6 +32506,13 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 	gap: calc(6 * var(--default-grid-baseline));
 	padding: calc(5 * var(--default-grid-baseline));
 }
+
+/* Clear the Nextcloud navigation toggle button (44px wide, absolutely
+   positioned at the left edge of .app-content) plus 12px breathing room, as
+   CnPageHeader does. Only the header shifts; the cards keep the full width. */
+.cn-link-cards-page__header[data-v-2f9a546b] {
+	padding-inline-start: 56px;
+}
 .cn-link-cards-page__title[data-v-2f9a546b] {
 	margin: 0 0 var(--default-grid-baseline);
 }
@@ -32063,11 +32557,31 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 	gap: calc(3 * var(--default-grid-baseline));
 	min-width: 0;
 	padding: calc(4 * var(--default-grid-baseline));
-	text-decoration: none;
+	transition: background-color var(--animation-quick, 100ms) ease, border-color var(--animation-quick, 100ms) ease, box-shadow var(--animation-quick, 100ms) ease;
+}
+
+/* A card is a link, and it must not look like a line of prose. A theme may
+   underline every link with `!important` (thematiq: `a { text-decoration:
+   underline !important }`, specificity 0,0,1). Among `!important` rules the
+   higher specificity wins, so this class rule has to carry it too; without it
+   the label and the description both rendered underlined on a live Nextcloud. */
+.cn-link-cards-page__card[data-v-2f9a546b],
+.cn-link-cards-page__card[data-v-2f9a546b]:hover,
+.cn-link-cards-page__card[data-v-2f9a546b]:focus,
+.cn-link-cards-page__card[data-v-2f9a546b]:active {
+	text-decoration: none !important;
 }
+
+/* Hover moves the whole card: border, background and a soft lift. */
 .cn-link-cards-page__card[data-v-2f9a546b]:hover {
 	background: var(--color-background-hover);
 	border-color: var(--color-primary-element);
+	box-shadow: 0 2px 6px var(--color-box-shadow);
+}
+@media (prefers-reduced-motion: reduce) {
+.cn-link-cards-page__card[data-v-2f9a546b] {
+		transition: none;
+}
 }
 .cn-link-cards-page__card[data-v-2f9a546b]:focus-visible {
 	border-color: var(--color-primary-element);
@@ -32084,8 +32598,15 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 	gap: var(--default-grid-baseline);
 	min-width: 0;
 }
+
+/* The label is the card's title. Its colour is set here, on the span, because
+   a theme may force its link colour on the `a` itself; an inherited link
+   colour made the title read as a hyperlink. */
 .cn-link-cards-page__label[data-v-2f9a546b] {
-	font-weight: 600;
+	color: var(--color-main-text);
+	font-size: 1.05em;
+	font-weight: 700;
+	line-height: 1.3;
 	overflow-wrap: anywhere;
 }
 .cn-link-cards-page__card-description[data-v-2f9a546b] {
@@ -33636,6 +34157,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);
@@ -34308,15 +34834,40 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 
 
 .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);
+	--cn-brand-stripe-total: calc(
+		var(--cn-brand-stripe-first) + var(--cn-brand-stripe-second) + var(--cn-brand-stripe-ratio-3, 1)
+	);
+	--cn-brand-stripe-stop-1: calc(var(--cn-brand-stripe-first) / var(--cn-brand-stripe-total) * 100%);
+	--cn-brand-stripe-stop-2: calc(
+		(var(--cn-brand-stripe-first) + var(--cn-brand-stripe-second)) / var(--cn-brand-stripe-total) * 100%
+	);
+	--cn-brand-stripe-direction: to right;
+	--cn-brand-stripe-bands: linear-gradient(
+		var(--cn-brand-stripe-direction),
+		var(--cn-brand-stripe-color-1, var(--color-primary-element)) 0 var(--cn-brand-stripe-stop-1),
+		var(--cn-brand-stripe-color-2, var(--color-primary-element)) var(--cn-brand-stripe-stop-1) var(--cn-brand-stripe-stop-2),
+		var(--cn-brand-stripe-color-3, var(--color-primary-element)) var(--cn-brand-stripe-stop-2) 100%
+	);
 	display: flex;
 	flex: none;
 	width: 100%;
 	height: var(--cn-brand-stripe-height, 4px);
+	background-image: var(--cn-brand-stripe-image, var(--cn-brand-stripe-bands));
+	background-repeat: repeat-x;
+	background-size: auto 100%;
+}
+.cn-brand-stripe--inverse[data-v-6fdfa763] {
+	background-image: var(--cn-brand-stripe-image-inverse, var(--cn-brand-stripe-image, var(--cn-brand-stripe-bands)));
 }
 .cn-brand-stripe--vertical[data-v-6fdfa763] {
+	--cn-brand-stripe-direction: to bottom;
 	flex-direction: column;
 	width: var(--cn-brand-stripe-height, 4px);
 	height: 100%;
+	background-repeat: repeat-y;
+	background-size: 100% auto;
 }
 .cn-brand-stripe__band[data-v-6fdfa763] {
 	flex-basis: 0;
@@ -34324,15 +34875,12 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 }
 .cn-brand-stripe__band--1[data-v-6fdfa763] {
 	flex-grow: var(--cn-brand-stripe-ratio-1, 1);
-	background-color: var(--cn-brand-stripe-color-1, var(--color-primary-element));
 }
 .cn-brand-stripe__band--2[data-v-6fdfa763] {
 	flex-grow: var(--cn-brand-stripe-ratio-2, 1);
-	background-color: var(--cn-brand-stripe-color-2, var(--color-primary-element));
 }
 .cn-brand-stripe__band--3[data-v-6fdfa763] {
 	flex-grow: var(--cn-brand-stripe-ratio-3, 1);
-	background-color: var(--cn-brand-stripe-color-3, var(--color-primary-element));
 }
 @media print {
 .cn-brand-stripe[data-v-6fdfa763] {