@conduction/nextcloud-vue 2.56.0-beta.11 → 2.56.0-beta.13

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -25,7 +25,7 @@
 		]"
 		v-bind="linkAttrs">
 		<div
-			v-if="resolvedIcon"
+			v-if="resolvedIcon && !isStacked"
 			class="cn-kpi-card__icon cn-stat-widget__icon"
 			:style="iconCircleStyle">
 			<CnWidgetIcon :name="resolvedIcon" :size="24" />
@@ -94,10 +94,23 @@
 						{{ formattedTrend }}
 					</span>
 				</template>
-				<span v-if="!displayLoading && !displayError && content.caption" class="cn-kpi-card__label cn-stat-widget__caption">
+				<span
+					v-if="!isStacked && !displayLoading && !displayError && resolvedCaption"
+					class="cn-kpi-card__label cn-stat-widget__caption"
+					:class="captionVariantClass"
+					data-testid="cn-stat-widget-caption">
 					{{ resolvedCaption }}
 				</span>
 			</div>
+			<!-- Stacked (`content.layout: "stacked"`): the caption is a line of
+			     its own under the number, as the board's "3 new this week". -->
+			<span
+				v-if="isStacked && !displayLoading && !displayError && resolvedCaption"
+				class="cn-kpi-card__label cn-stat-widget__caption cn-kpi-card__caption-line"
+				:class="captionVariantClass"
+				data-testid="cn-stat-widget-caption">
+				{{ resolvedCaption }}
+			</span>
 		</div>
 	</component>
 </template>
@@ -461,7 +474,7 @@ export default {
 		 * counted between LOCAL CALENDAR DAYS, not as elapsed milliseconds, so
 		 * the time of day on a deadline never moves the answer.
 		 *
-		 * @type {{label?: string, icon?: string, iconColor?: string, valueColor?: string, caption?: string, route?: (object|string), clickRoute?: (object|string), link?: string, format?: {style?: string, currency?: string, decimals?: number, prefix?: string, suffix?: string}, source?: {kind?: string, register?: string, schema?: string, metric?: string, field?: string, filter?: object, url?: string, path?: string, params?: object}, endpointSource?: {url: string, method?: string, params?: object, responsePath?: string}, valueField?: string, limitField?: string, limit?: number, dateRange?: {presets?: Array<{id: string, label?: string, from?: string, to?: string}>, default?: string}, previousField?: string, deltaField?: string, goodDirection?: ('up'|'down'), variant?: ('default'|'primary'|'success'|'warning'|'error'|'danger'), variantWhen?: Array<{op: string, value: unknown, variant: string, icon?: string}>, objectField?: (string|{field: string, resolve?: {register: string, schema: string, labelField?: string, variantField?: string, variantMap?: {[key: string]: string}}}), display?: ('text'|'badge'|'countdown'), countdown?: {unit?: 'days', warnAt?: number, dangerAt?: number, futureLabel?: string, todayLabel?: string, pastLabel?: string, emptyText?: string}, emptyText?: string, overrides?: Array<{when: {field: string, op?: string, value?: unknown}, label?: string, variant?: string, icon?: string}>}}
+		 * @type {{label?: string, icon?: string, iconColor?: string, valueColor?: string, caption?: string, route?: (object|string), clickRoute?: (object|string), link?: string, format?: {style?: string, currency?: string, decimals?: number, prefix?: string, suffix?: string}, source?: {kind?: string, register?: string, schema?: string, metric?: string, field?: string, filter?: object, url?: string, path?: string, params?: object}, endpointSource?: {url: string, method?: string, params?: object, responsePath?: string}, valueField?: string, limitField?: string, limit?: number, dateRange?: {presets?: Array<{id: string, label?: string, from?: string, to?: string}>, default?: string}, previousField?: string, deltaField?: string, goodDirection?: ('up'|'down'), variant?: ('default'|'primary'|'success'|'warning'|'error'|'danger'), variantWhen?: Array<{op: string, value: unknown, variant: string, icon?: string}>, objectField?: (string|{field: string, resolve?: {register: string, schema: string, labelField?: string, variantField?: string, variantMap?: {[key: string]: string}}}), display?: ('text'|'badge'|'countdown'), countdown?: {unit?: 'days', warnAt?: number, dangerAt?: number, futureLabel?: string, todayLabel?: string, pastLabel?: string, emptyText?: string}, emptyText?: string, captionVariant?: ('default'|'primary'|'success'|'warning'|'error'|'danger'), captionVariantWhen?: Array<{op: string, value: unknown, variant: string}>, overrides?: Array<{when: {field: string, op?: string, value?: unknown}, label?: string, variant?: string, icon?: string, caption?: string, captionVariant?: string}>}}
 		 */
 		content: {
 			type: Object,
@@ -605,7 +618,10 @@ export default {
 		 * @return {string}
 		 */
 		resolvedCaption() {
-			const caption = this.content.caption
+			const override = this.activeOverride
+			const caption = (override && typeof override.caption === 'string' && override.caption !== '')
+				? override.caption
+				: this.content.caption
 			if (!caption) {
 				return ''
 			}
@@ -615,11 +631,58 @@ export default {
 			}
 			const payload = this.endpointMode ? this.epData : null
 			return translated.replace(/\{([A-Za-z0-9_.]+)\}/g, (whole, path) => {
+				// `{value}` is the tile's own number, so a caption can read
+				// "{value} due today" on a register-counted tile that has no
+				// payload to read fields from.
+				if (path === 'value' && (payload === null || getByPath(payload, path) === undefined)) {
+					return this.formattedValue === undefined || this.formattedValue === null ? '' : String(this.formattedValue)
+				}
 				const v = getByPath(payload, path)
 				return (v === undefined || v === null) ? '' : String(v)
 			}).replace(/\s{2,}/g, ' ').trim()
 		},
 
+		/**
+		 * The first `content.captionVariantWhen` rule the tile's value
+		 * matches (`[{ op, value, variant }]`, the `variantWhen` shape), or
+		 * null. Colours the caption on the value without recolouring the
+		 * tile: "1 due today" turns red while the number stays ink.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-stat-tile-colours-its-caption-by-rule
+		 * @return {object|null}
+		 */
+		activeCaptionRule() {
+			const rules = this.content.captionVariantWhen
+			if (!Array.isArray(rules) || rules.length === 0) {
+				return null
+			}
+			const current = this.displayValue
+			if (current === null || current === undefined) {
+				return null
+			}
+			return rules.find((r) => r && this.matchesRule(current, r)) || null
+		},
+
+		/**
+		 * The caption's colour class: the matching override's
+		 * `captionVariant`, else `content.captionVariant`, as
+		 * `cn-kpi-card__label--<variant>`. '' for `default` or an unknown
+		 * variant, so an uncoloured caption is what it always was.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-stat-tile-colours-its-caption-by-rule
+		 * @return {string}
+		 */
+		captionVariantClass() {
+			const override = this.activeOverride
+			const variant = (override && override.captionVariant)
+				|| (this.activeCaptionRule && this.activeCaptionRule.variant)
+				|| this.content.captionVariant
+			if (!variant || variant === 'default' || !Object.hasOwn(VARIANT_COLORS, variant)) {
+				return ''
+			}
+			return `cn-kpi-card__label--${variant === 'danger' ? 'error' : variant}`
+		},
+
 		/**
 		 * The unwrapped detail-page object context for token resolution, or null
 		 * on surfaces (dashboards) that don't provide one.
@@ -1188,12 +1251,31 @@ export default {
 		/**
 		 * Card orientation. Horizontal (icon beside the number) is the
 		 * canonical KPI card; `content.layout: 'vertical'` stacks the icon
-		 * above a centred number for a tile taller than it is wide.
+		 * above a centred number for a tile taller than it is wide;
+		 * `content.layout: 'stacked'` is the board look (see `isStacked`).
 		 *
-		 * @return {'horizontal'|'vertical'}
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-stat-tile-can-take-the-stacked-board-look
+		 * @return {'horizontal'|'vertical'|'stacked'}
 		 */
 		cardLayout() {
-			return (this.content || {}).layout === 'vertical' ? 'vertical' : 'horizontal'
+			const layout = (this.content || {}).layout
+			if (layout === 'vertical' || layout === 'stacked') {
+				return layout
+			}
+			return 'horizontal'
+		},
+
+		/**
+		 * Whether the tile takes the stacked board look (`content.layout:
+		 * "stacked"`): a plain muted label, the number at 34px in the text
+		 * colour, the caption on a line of its own, and no icon circle. Off by
+		 * default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-stat-tile-can-take-the-stacked-board-look
+		 * @return {boolean}
+		 */
+		isStacked() {
+			return this.cardLayout === 'stacked'
 		},
 
 		/**

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -8,6 +8,7 @@
 		<CnTabs
 			:aria-label="stripLabel"
 			:moreLabel="moreLabel"
+			:variant="stripVariant"
 			class="cn-tabs-widget__tabs"
 			@update:activeIndex="onTabChange">
 			<!-- One Actions menu for the whole widget, bound to whichever child
@@ -246,9 +247,10 @@ export default {
 		 *
 		 * `maxVisibleTabs` caps the strip: later tabs go under "More".
 		 * `hideEmpty: true` moves a tab whose count is 0 there too.
-		 * `moreLabel` names that menu.
+		 * `moreLabel` names that menu. `variant: "segmented"` draws the strip
+		 * as a pill switch (CnTabs' segmented variant); `line` is the default.
 		 *
-		 * @type {{ tabs?: Array<{widgetId: string, label?: string, icon?: string, count?: number, countField?: string, overflow?: boolean}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string }}
+		 * @type {{ tabs?: Array<{widgetId: string, label?: string, icon?: string, count?: number, countField?: string, overflow?: boolean}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string, variant?: ('line'|'segmented') }}
 		 */
 		content: {
 			type: Object,
@@ -464,6 +466,17 @@ export default {
 			return this.activeTab?.label || ''
 		},
 
+		/**
+		 * The strip's look: `segmented` when the content asks for it, else
+		 * CnTabs' default `line`. An unknown value falls back to `line`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-tabs-widget-renders-a-segmented-strip
+		 * @return {('line'|'segmented')} The CnTabs variant.
+		 */
+		stripVariant() {
+			return this.content?.variant === 'segmented' ? 'segmented' : 'line'
+		},
+
 		/**
 		 * Accessible name for the tab strip.
 		 *

package/src/components/CnWidgetWrapper/CnWidgetWrapper.md

@@ -163,3 +163,7 @@ Request a feature / Report a bug / Documentation render on every widget; the sha
 ## High contrast
 
 `high-contrast` declares that this widget wants a high contrast treatment. The flag reaches the theme; the component picks no colour. See [the reference page](../../../docs/components/cn-widget-wrapper.md#high-contrast).
+
+### A text link in the header (`headerLink`)
+
+`headerLink` (`{ label, route?, params?, query?, href? }`) draws one text link in the header before the overflow menu, such as "All deadlines".

package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue

@@ -69,6 +69,17 @@
 			     It used to gate both, so a caller who switched the menu off
 			     also lost the Save button for an inline edit, silently. -->
 			<div v-if="actionsAreVisible()" class="cn-widget-wrapper__actions">
+				<!-- One text link in the header (`headerLink`): "All deadlines",
+				     "To the board". A route is a router link, an href a plain
+				     anchor. Sits before the slot and the overflow menu. -->
+				<component
+					:is="headerLinkTag"
+					v-if="headerLinkTag"
+					class="cn-widget-wrapper__header-link"
+					data-testid="cn-widget-wrapper-header-link"
+					v-bind="headerLinkAttrs">
+					{{ headerLinkLabel }}
+				</component>
 				<!-- @slot actions Custom action buttons rendered before the
 				     built-in overflow menu. -->
 				<slot name="actions" />
@@ -351,6 +362,22 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * One text link in the header's actions group, before the overflow
+		 * menu: `{ label, route?, params?, query?, href? }`. A `route` is a
+		 * named router link (needs a router), an `href` a plain anchor. The
+		 * label goes through the host translate function. Null (the
+		 * default) draws nothing. Manifest: `headerLink` on the widget
+		 * definition or its layout entry.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @type {{label: string, route?: string, params?: object, query?: object, href?: string}|null}
+		 */
+		headerLink: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * Whether the header's overflow action menu (Refresh / Documentation /
 		 * Request-a-feature + any `#action-items`) renders. Shown by default;
@@ -634,6 +661,62 @@ export default {
 			return this.translate ?? this.cnTranslate
 		},
 
+		/**
+		 * The header link's tag: `router-link` for a route (when a router is
+		 * mounted), `a` for an href, '' when there is no usable link.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @return {string}
+		 */
+		headerLinkTag() {
+			const link = this.headerLink
+			if (!link || typeof link.label !== 'string' || link.label === '') {
+				return ''
+			}
+			if (link.route && this.$router) {
+				return 'router-link'
+			}
+			if (typeof link.href === 'string' && link.href !== '') {
+				return 'a'
+			}
+			return ''
+		},
+
+		/**
+		 * The header link's attributes for its tag.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @return {object}
+		 */
+		headerLinkAttrs() {
+			const link = this.headerLink || {}
+			if (this.headerLinkTag === 'router-link') {
+				const to = { name: link.route }
+				if (link.params && typeof link.params === 'object') {
+					to.params = link.params
+				}
+				if (link.query && typeof link.query === 'object') {
+					to.query = link.query
+				}
+				return { to }
+			}
+			if (this.headerLinkTag === 'a') {
+				return { href: link.href }
+			}
+			return {}
+		},
+
+		/**
+		 * The header link's text, through the host translate function.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @return {string}
+		 */
+		headerLinkLabel() {
+			const label = this.headerLink && this.headerLink.label
+			return label ? this.effectiveTranslate(label) : ''
+		},
+
 		/**
 		 * The RENDERED widget title — `displayTitle` run through the host
 		 * translate function. Kept separate from `displayTitle` on purpose:
@@ -877,7 +960,7 @@ export default {
 		 * @return {boolean} True when the group would hold a visible control.
 		 */
 		actionsAreVisible() {
-			return this.showActions || this.actionsSlotRenders()
+			return this.showActions || this.actionsSlotRenders() || Boolean(this.headerLinkTag)
 		},
 
 		/**
@@ -1127,6 +1210,29 @@ export default {
 	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 {
+	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:hover,
+.cn-widget-wrapper__header-link:focus-visible {
+	text-decoration: underline;
+}
+
+.cn-widget-wrapper__header-link: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

package/src/css/detail-page.css

@@ -8,6 +8,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;
@@ -33,6 +39,28 @@
 	min-width: 0;
 }
 
+/* A widget in the header (`config.headerWidget`) takes a row of its own under
+   the title and the actions. */
+.cn-detail-page__header--with-widget {
+	flex-wrap: wrap;
+	row-gap: var(--cn-detail-header-row-gap, 22px);
+}
+
+.cn-detail-page__header-widget {
+	flex: 1 0 100%;
+	min-width: 0;
+}
+
+/* The header as a card (`config.headerCard`): the board's case header, a
+   bordered box on the surface colour. The 56px inset that clears the
+   navigation toggle is not needed inside a card that starts below it. */
+.cn-detail-page__header--card {
+	padding: var(--cn-detail-header-card-padding, 22px 24px);
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-detail-header-card-radius, 12px);
+	background: var(--color-main-background);
+}
+
 .cn-detail-page__header-left {
 	display: flex;
 	align-items: center;
@@ -175,7 +203,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);
@@ -200,7 +228,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 {
@@ -208,7 +236,7 @@
 }
 
 .cn-detail-page__stats-cell--right {
-	text-align: right;
+	text-align: end;
 }
 
 /* Body & content */
@@ -342,7 +370,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;
 }
@@ -453,3 +481,8 @@
 	font-size: 0.9em;
 	white-space: nowrap;
 }
+
+/* A page view the switch shows with nothing to draw (view-switch-containers). */
+.cn-detail-page .cn-page-view-region--empty {
+	padding: 40px 20px;
+}

package/src/css/kpi-card.css

@@ -133,7 +133,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;
@@ -248,6 +248,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:
@@ -344,6 +367,53 @@
 	font-size: var(--cn-kpi-value-size-stacked, 2rem);
 }
 
+/* Stacked: the board's tile (`content.layout: 'stacked'`). A plain muted
+   label, the number at 34px/700 in the text colour, and the caption on a line
+   of its own; CnStatWidget draws no icon circle in this layout. The padding
+   adds up with a dashboard card-fit cell's 8px 14px to the board's 18px 20px.
+   Every value is a token so a theme can move it. */
+.cn-kpi-card--stacked {
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: center;
+	gap: 0;
+	padding: var(--cn-kpi-stacked-padding, 10px 6px);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__body {
+	gap: var(--cn-kpi-stacked-gap, 6px);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__title {
+	font-size: var(--cn-kpi-stacked-title-size, 14px);
+	font-weight: var(--cn-kpi-stacked-title-weight, 400);
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__value {
+	font-size: var(--cn-kpi-stacked-value-size, 34px);
+	font-weight: var(--cn-kpi-value-weight, 700);
+	line-height: 1;
+	letter-spacing: -0.01em;
+	color: var(--cn-kpi-stacked-value-color, var(--color-main-text));
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__caption-line {
+	flex: 0 0 auto;
+	max-width: 100%;
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: 500;
+}
+
+/* A linked stacked tile reads as a tile, not as underlined link text. The
+   NL Design theme underlines every `a` with `!important`, so the opt-out
+   needs it too; it only applies to this opt-in layout. */
+a.cn-kpi-card--stacked,
+a.cn-kpi-card--stacked:hover,
+a.cn-kpi-card--stacked:focus-visible {
+	text-decoration: none !important;
+}
+
 /* Filled: the card draws its own grey box, for a KPI that is NOT already
    inside a wrapper that draws one. Opt-in via `content.flat: false`. */
 .cn-kpi-card--filled {

package/src/css/table.css

@@ -155,7 +155,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);
@@ -174,6 +174,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,
@@ -235,7 +247,7 @@
 }
 
 .cn-data-table td.cn-cell--end {
-	text-align: right;
+	text-align: end;
 	white-space: nowrap;
 }
 
@@ -273,7 +285,7 @@
 }
 
 .cn-table-sort-indicator {
-	margin-left: var(--default-grid-baseline);
+	margin-inline-start: var(--default-grid-baseline);
 	opacity: 0.6;
 }
 
@@ -383,7 +395,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);
@@ -448,7 +460,7 @@
 
 .cn-table-col--icon {
 	width: 40px;
-	padding-right: 0;
+	padding-inline-end: 0;
 	text-align: center;
 	color: var(--color-text-maxcontrast);
 }
@@ -511,7 +523,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); }