@antelopejs/dms 0.6.1 → 0.7.0

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/members/MemberRolePicker.vue

@@ -20,6 +20,8 @@ interface RoleOption {
   _id: string;
   name: string;
   permissionIds: string[];
+  /** Set when what the role grants amounts to owner-level access. */
+  warnings?: string[];
 }
 
 interface RoleOptionsResponse {
@@ -77,8 +79,7 @@ const isOwner = computed(
   () => !!props.ownerField && formState?.value?.[props.ownerField] === true,
 );
 const isInert = computed(() => props.disabled || isOwner.value);
-// Without an owner field (the invite form), the form disables the roles for
-// an owner only.
+// Without an owner field, the form disables the roles for an owner only.
 const showsOwnerHint = computed(() =>
   props.ownerField ? isOwner.value : props.disabled,
 );
@@ -102,6 +103,19 @@ const roleItems = computed<ChipGroupItem[]>(() =>
 const selectedRoles = computed(() =>
   options.value.roles.filter((role) => selectedIds.value.has(role._id)),
 );
+// An owner holds every permission anyway: no warning then.
+const ownerLevelWarning = computed(() => {
+  if (isOwner.value) return undefined;
+  const names = selectedRoles.value
+    .filter((role) => (role.warnings?.length ?? 0) > 0)
+    .map((role) => role.name);
+  if (names.length === 0) return undefined;
+  return t(
+    "page.settings.members.invite.roles_owner_level",
+    { roles: names.join(" + ") },
+    names.length,
+  );
+});
 const grantedCount = computed(
   () => new Set(selectedRoles.value.flatMap((role) => role.permissionIds)).size,
 );
@@ -180,5 +194,13 @@ function toggle(roleId: string) {
         {{ t("page.settings.members.invite.compare_roles") }}
       </ULink>
     </p>
+    <p
+      v-if="ownerLevelWarning"
+      class="text-warning flex items-start gap-1.5 text-xs"
+      data-role-owner-level
+    >
+      <UIcon name="i-ph-warning" class="mt-px size-3.5 shrink-0" />
+      <span>{{ ownerLevelWarning }}</span>
+    </p>
   </div>
 </template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/notification/NotificationMatrixCategory.vue

@@ -17,13 +17,26 @@ interface NotificationMatrixCategoryProps {
   disabled: boolean;
   /** Directly under the column header, which already draws the rule. */
   first?: boolean;
+  /** The category's subjects are shown under it. */
+  expanded: boolean;
+  /** Id of the element holding the subjects, for `aria-controls`. */
+  controls: string;
 }
 
 const props = defineProps<NotificationMatrixCategoryProps>();
-const emit = defineEmits<{ toggle: [enabled: boolean] }>();
+const emit = defineEmits<{
+  toggle: [enabled: boolean];
+  "toggle-expanded": [];
+}>();
 const { t } = useI18n();
 
 const label = computed(() => t(props.category.labelKey));
+const countLabel = computed(() =>
+  t("page.settings.notifications.category_count", {
+    count: props.enabledCount,
+    total: props.total,
+  }),
+);
 const iconWellTone = computed(() =>
   props.category.tagKey ? "primary" : "muted",
 );
@@ -35,26 +48,63 @@ const iconWellTone = computed(() =>
     class="border-default min-h-14 bg-[color-mix(in_srgb,var(--dms-bg-muted)_55%,transparent)] py-2.5"
     role="row"
   >
-    <div class="flex min-w-0 items-center gap-3" role="rowheader">
-      <DmsIconWell :icon="props.category.icon" :tone="iconWellTone" size="xs" />
-      <div class="min-w-0">
-        <div
-          class="text-highlighted flex flex-wrap items-center gap-2 text-[13px] font-[650]"
-        >
-          {{ label }}
-          <span
-            v-if="props.category.tagKey"
-            :class="[SOURCE_TAG_CLASS, MODULE_TAG_CLASS]"
+    <!-- The caret folds the subjects, as in the roles editor; the title
+         area does too, for the pointer. The master switch and the count stay
+         on the row while it is folded. -->
+    <div class="flex min-w-0 items-center gap-2" role="rowheader">
+      <UButton
+        :icon="props.expanded ? 'i-ph-caret-down' : 'i-ph-caret-right'"
+        color="neutral"
+        variant="link"
+        size="xs"
+        class="text-muted shrink-0 p-0"
+        :aria-label="
+          props.expanded
+            ? t('page.settings.notifications.category_collapse', {
+                name: label,
+              })
+            : t('page.settings.notifications.category_expand', { name: label })
+        "
+        :aria-expanded="props.expanded"
+        :aria-controls="props.controls"
+        @click="emit('toggle-expanded')"
+      />
+      <div
+        class="flex min-w-0 flex-1 cursor-pointer items-center gap-3"
+        data-category-title
+        @click="emit('toggle-expanded')"
+      >
+        <DmsIconWell
+          :icon="props.category.icon"
+          :tone="iconWellTone"
+          size="xs"
+        />
+        <div class="min-w-0">
+          <div
+            class="text-highlighted flex flex-wrap items-center gap-2 text-[13px] font-[650]"
+          >
+            {{ label }}
+            <span
+              v-if="props.category.tagKey"
+              :class="[SOURCE_TAG_CLASS, MODULE_TAG_CLASS]"
+            >
+              {{ t(props.category.tagKey) }}
+            </span>
+          </div>
+          <p
+            v-if="props.category.descriptionKey"
+            class="text-muted mt-px text-xs"
+          >
+            {{ t(props.category.descriptionKey) }}
+          </p>
+          <!-- The count column goes on narrow matrices: the count moves under
+               the title, where a folded group still sums itself up. -->
+          <p
+            class="text-dimmed mt-0.5 hidden font-mono text-[11px] font-medium @max-2xl/matrix:block"
           >
-            {{ t(props.category.tagKey) }}
-          </span>
+            {{ countLabel }}
+          </p>
         </div>
-        <p
-          v-if="props.category.descriptionKey"
-          class="text-muted mt-px text-xs"
-        >
-          {{ t(props.category.descriptionKey) }}
-        </p>
       </div>
     </div>
     <div class="flex items-center justify-center" role="cell">
@@ -75,12 +125,7 @@ const iconWellTone = computed(() =>
     </div>
     <div class="flex justify-end" role="cell">
       <span class="text-dimmed font-mono text-[11px] font-medium">
-        {{
-          t("page.settings.notifications.category_count", {
-            count: props.enabledCount,
-            total: props.total,
-          })
-        }}
+        {{ countLabel }}
       </span>
     </div>
   </div>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/notification/NotificationPreferencesForm.vue

@@ -2,10 +2,12 @@
 import { EYEBROW_CLASS } from "#dms-ui/app/build/utils/eyebrow";
 import type { NotificationCategory } from "../../../../composables/notification/useNotificationCatalog";
 import { useNotificationPreferences } from "../../../../composables/notification/useNotificationPreferences";
+import { useNotificationGroupsOpen } from "../../../../composables/notification/useNotificationGroupsOpen";
 import { useInstantSaveHeader } from "../../../../../composables/layout/useInstantSaveHeader";
 import NotificationMatrixCategory from "./NotificationMatrixCategory.vue";
 import NotificationMatrixSubject from "./NotificationMatrixSubject.vue";
 import {
+  categorySubjectsElementId,
   MATRIX_CONTAINER_CLASS,
   MATRIX_GRID_CLASS,
 } from "./notificationDisplay";
@@ -29,6 +31,7 @@ const {
   retry,
   load,
 } = useNotificationPreferences();
+const { isOpen, toggleOpen } = useNotificationGroupsOpen();
 
 const visibleCategories = computed(() =>
   categories.value.filter((category) => subjectsOf(category.id).length > 0),
@@ -90,7 +93,7 @@ onMounted(load);
           {{ t("page.settings.notifications.column_in_app") }}
         </span>
         <span
-          class="flex items-center justify-center gap-1.5"
+          class="flex items-center justify-center gap-1.5 whitespace-nowrap"
           role="columnheader"
         >
           {{ t("page.settings.notifications.column_email") }}
@@ -147,17 +150,29 @@ onMounted(load);
           :total="subjectsOf(category.id).length"
           :disabled="toggleableSubjectsOf(category).length === 0"
           :first="index === 0"
+          :expanded="isOpen(category.id)"
+          :controls="categorySubjectsElementId(category.id)"
           @toggle="(enabled) => toggleCategory(category, enabled)"
+          @toggle-expanded="toggleOpen(category.id)"
         />
-        <NotificationMatrixSubject
-          v-for="subject in subjectsOf(category.id)"
-          :key="`${category.id}:${subject.id}`"
-          :subject="subject"
-          :enabled="isEnabled(subject)"
-          :state="rowState(subject)"
-          @toggle="(enabled) => toggleSubject(subject, enabled)"
-          @retry="retry"
-        />
+        <UCollapsible
+          :open="isOpen(category.id)"
+          :ui="{ content: 'motion-reduce:animate-none' }"
+        >
+          <template #content>
+            <div :id="categorySubjectsElementId(category.id)" role="rowgroup">
+              <NotificationMatrixSubject
+                v-for="subject in subjectsOf(category.id)"
+                :key="`${category.id}:${subject.id}`"
+                :subject="subject"
+                :enabled="isEnabled(subject)"
+                :state="rowState(subject)"
+                @toggle="(enabled) => toggleSubject(subject, enabled)"
+                @retry="retry"
+              />
+            </div>
+          </template>
+        </UCollapsible>
       </template>
     </div>
 

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/notification/notificationDisplay.ts

@@ -9,12 +9,40 @@ import type {
   UserNotification,
 } from "../../../../../composables/notification/useNotifications";
 
-/** Notifications without a tone stand out in `primary` until read. */
+/**
+ * Notifications without a tone stand out in `primary` until read. Mirrors
+ * the server's `resolveNotificationTone` (`src/utils/notification-tones.ts`),
+ * which weighs the unread badge of the bell and the navigation with it; a
+ * test holds the two together.
+ */
 export const resolveNotificationTone = (
   notification: UserNotification,
 ): NotificationTone =>
   notification.tone ?? (notification.isRead ? "neutral" : "primary");
 
+/** Strongest first, as the server ranks the tones of the unread badge. */
+const UNREAD_TONE_ORDER: NotificationTone[] = [
+  "error",
+  "warning",
+  "primary",
+  "success",
+  "neutral",
+];
+
+/**
+ * The unread badge's tone once `incoming` arrives: an unread notification can
+ * only strengthen it, so the stronger of the current tone and its own, as
+ * the server would weigh the whole feed.
+ */
+export const unreadToneWith = (
+  current: NotificationTone | undefined,
+  incoming: UserNotification,
+): NotificationTone | undefined => {
+  if (incoming.isRead) return current;
+  const tones = new Set([current, resolveNotificationTone(incoming)]);
+  return UNREAD_TONE_ORDER.find((tone) => tones.has(tone));
+};
+
 /** Inbox sections, newest first. */
 export type NotificationDayGroupKey = RelativeDayBucket;
 
@@ -64,13 +92,21 @@ export const MATRIX_CONTAINER_CLASS = "@container/matrix";
 /**
  * v2 .cs-matrix grid: subject, in-app, email, state. Under 672px of matrix
  * the state column goes; under 448px (phones) only the subject and in-app
- * columns remain.
+ * columns remain. The email column fits its header on one line, the label
+ * and its "Soon" badge, in French too.
  */
 export const MATRIX_GRID_CLASS =
-  "grid grid-cols-[minmax(0,1fr)_80px_96px_168px] items-center gap-x-3 px-[18px] @max-2xl/matrix:grid-cols-[minmax(0,1fr)_80px_96px] @max-2xl/matrix:[&>:nth-child(4)]:hidden @max-md/matrix:grid-cols-[minmax(0,1fr)_60px] @max-md/matrix:[&>:nth-child(n+3)]:hidden";
+  "grid grid-cols-[minmax(0,1fr)_80px_120px_168px] items-center gap-x-3 px-[18px] @max-2xl/matrix:grid-cols-[minmax(0,1fr)_80px_120px] @max-2xl/matrix:[&>:nth-child(4)]:hidden @max-md/matrix:grid-cols-[minmax(0,1fr)_60px] @max-md/matrix:[&>:nth-child(n+3)]:hidden";
+
+/**
+ * The subject's indent under its category: past the caret and the icon
+ * well, under the category's title. Dropped where only two columns remain.
+ */
+export const MATRIX_SUBJECT_INDENT_CLASS = "pl-[66px] @max-md/matrix:pl-0";
 
-/** The subject's indent under its category, dropped where only two columns remain. */
-export const MATRIX_SUBJECT_INDENT_CLASS = "pl-[42px] @max-md/matrix:pl-0";
+/** Id of the element holding a category's subjects, for `aria-controls`. */
+export const categorySubjectsElementId = (categoryId: string) =>
+  `notification-category-subjects-${categoryId}`;
 
 /** v2 .cs-mod: the mono module / source tag. */
 export const SOURCE_TAG_CLASS = `${MONO_TAG_CLASS} inline-flex h-[18px] items-center border border-accented whitespace-nowrap text-muted`;

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/profile/ProfilePreferencesSummary.vue

@@ -11,6 +11,7 @@ const {
   regionSummary,
   notificationsSummary,
   hasUnread,
+  notificationsTone,
   appearanceSummary,
   placeholders,
 } = useProfilePreferences();
@@ -44,7 +45,7 @@ const {
     <ProfileSummaryRow
       v-if="rows.notifications.visible"
       :icon="hasUnread ? 'i-ph-bell-ringing' : 'i-ph-bell'"
-      :tone="hasUnread ? 'warning' : 'muted'"
+      :tone="notificationsTone"
       :lead="t(`${KEY}.notifications_title`)"
       :loading="notificationsSummary === undefined"
       :placeholder="placeholders.notifications"

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/profile/ProfileSecuritySummary.vue

@@ -3,12 +3,28 @@ import {
   SECURITY_PAGE_PATH,
   useSecurityOverview,
 } from "../../../../composables/settings/security/useSecurityOverview";
+import { iconWellToneOf } from "#dms-ui/app/build/utils/tone";
 import ProfileSummaryRow from "./ProfileSummaryRow.vue";
 
-const { t } = useI18n();
-const { overview, attention, isUnavailable, refresh } = useSecurityOverview();
+const { t, locale } = useI18n();
+const { overview, attention, attentionTone, isUnavailable, refresh } =
+  useSecurityOverview();
 
 const needsAttention = computed(() => attention.value.length > 0);
+// Every point is named, in the Security page's own words, joined the way the
+// language joins a list ("…, … and …").
+const attentionText = computed(() =>
+  new Intl.ListFormat(locale.value, { type: "conjunction" }).format(
+    attention.value.map((item) =>
+      t(`page.settings.security.attention.${item}`),
+    ),
+  ),
+);
+// The well takes the tone of the Security page's navigation badge, as the
+// server weighs what needs attention; quiet when nothing does.
+const wellTone = computed(() =>
+  overview.value ? iconWellToneOf(attentionTone.value) : "muted",
+);
 
 const facts = computed(() => {
   const data = overview.value;
@@ -44,7 +60,7 @@ onMounted(refresh);
          with what needs attention there. -->
   <ProfileSummaryRow
     :icon="needsAttention ? 'i-ph-shield-warning' : 'i-ph-shield-check'"
-    :tone="needsAttention ? 'warning' : overview ? 'success' : 'muted'"
+    :tone="wellTone"
     :loading="!overview && !isUnavailable"
     :placeholder="placeholder"
     :to="SECURITY_PAGE_PATH"
@@ -63,7 +79,7 @@ onMounted(refresh);
         }}
       </b>
       <template v-if="needsAttention">
-        — {{ t(`page.settings.security.attention.${attention[0]}`) }}.
+        {{ ` — ${attentionText}.` }}
       </template>
       <template v-else>{{ " — " }}</template>
       {{ facts }}

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RoleEditor.vue

@@ -14,6 +14,7 @@ import {
   type PermissionArea,
   type PermissionIndex,
   searchPermissions,
+  selectedWarningLabels,
 } from "./role-permissions";
 import {
   ROLE_DESCRIPTION_MAX_LENGTH,
@@ -92,6 +93,11 @@ const hits = computed(() =>
 const hitAreaCount = computed(
   () => new Set((hits.value ?? []).map((hit) => hit.areaId)).size,
 );
+// The permissions of the role that amount to owner-level access, however
+// they were ticked (a parent grants its whole subtree).
+const ownerLevelLabels = computed(() =>
+  selectedWarningLabels(props.index, props.areas, props.selection, processI18n),
+);
 const selectedCount = computed(
   () => props.index.allIds.filter((id) => props.selection.has(id)).length,
 );
@@ -343,6 +349,21 @@ function toggleArea(id: string): void {
       </div>
     </div>
 
+    <div v-if="ownerLevelLabels.length > 0" class="px-[18px] pt-3">
+      <DmsBanner
+        size="sm"
+        tone="warning"
+        icon="i-ph-warning"
+        :title="t('page.settings.roles.editor.owner_level_title')"
+        :description="
+          t('page.settings.roles.editor.owner_level_description', {
+            names: ownerLevelLabels.join(', '),
+          })
+        "
+        data-role-owner-level
+      />
+    </div>
+
     <RolePermissionTree
       :areas="props.areas"
       :index="props.index"

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolePermissionArea.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { tv } from "tailwind-variants";
+import RolePermissionWarning from "./RolePermissionWarning.vue";
 import {
   childrenElementId,
   type PermissionArea,
@@ -14,9 +15,13 @@ interface RolePermissionAreaProps {
   state: SelectionState;
   isExpanded: boolean;
   disabled: boolean;
+  /** Warnings of the selected permissions a closed area hides. */
+  hiddenWarnings?: string[];
 }
 
-const props = defineProps<RolePermissionAreaProps>();
+const props = withDefaults(defineProps<RolePermissionAreaProps>(), {
+  hiddenWarnings: () => [],
+});
 const emit = defineEmits<{
   toggle: [checked: boolean];
   "toggle-expanded": [];
@@ -32,7 +37,6 @@ const childrenId = computed(() => childrenElementId(props.area.node.id));
 const subtitle = computed(() =>
   processI18n(props.area.node.description ?? props.area.section ?? ""),
 );
-
 // v2 .cs-parea: caret, tri-state box, icon tile, title over its subtitle and
 // the "n/m" count with its bar; the count turns accent when complete. The
 // row reads the editor's width (@container/editor): the hover id goes under
@@ -111,6 +115,16 @@ const ui = computed(() => theme({ completion: completion.value }));
         >
           {{ subtitle }}
         </small>
+        <RolePermissionWarning
+          v-if="props.area.node.warning"
+          :warnings="[props.area.node.warning]"
+        />
+        <RolePermissionWarning
+          v-if="props.hiddenWarnings.length > 0"
+          :warnings="props.hiddenWarnings"
+          compact
+          class="mt-1"
+        />
       </button>
       <span :class="ui.count()">
         <span

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolePermissionBranch.vue

@@ -48,6 +48,7 @@ function isExpanded(node: RolePermissionNode): boolean {
         "
         :expanded="isExpanded(node)"
         :controls="childrenElementId(node.id)"
+        :hidden-warnings="props.context.warningsBelowOf(node)"
         expandable
         @toggle="(checked) => props.context.toggle(node.id, checked)"
         @toggle-expanded="props.context.toggleExpanded(node.id)"

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolePermissionLeaf.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { tv } from "tailwind-variants";
+import RolePermissionWarning from "./RolePermissionWarning.vue";
 import {
   highlightSegments,
   type PermissionChange,
@@ -31,6 +32,8 @@ interface RolePermissionLeafProps {
   controls?: string;
   /** Selected permissions of the subtree, shown by a collapsible row. */
   count?: SelectionCount;
+  /** Warnings of the selected permissions a closed row hides. */
+  hiddenWarnings?: string[];
 }
 
 const props = withDefaults(defineProps<RolePermissionLeafProps>(), {
@@ -43,6 +46,7 @@ const props = withDefaults(defineProps<RolePermissionLeafProps>(), {
   expanded: false,
   controls: undefined,
   count: undefined,
+  hiddenWarnings: () => [],
 });
 
 const emit = defineEmits<{
@@ -100,7 +104,6 @@ const ui = computed(() =>
 
 const label = computed(() => processI18n(props.node.label));
 const segments = computed(() => highlightSegments(label.value, props.query));
-
 const CHANGE_CLASSES: Record<"added" | "removed", string> = {
   added: "text-warning",
   removed: "text-error",
@@ -187,10 +190,19 @@ function onRowClick(): void {
           <UIcon name="i-ph-check" class="size-[11px]" />
           {{ props.autoAddedHint }}
         </span>
+        <RolePermissionWarning
+          v-if="props.hiddenWarnings.length > 0"
+          :warnings="props.hiddenWarnings"
+          compact
+        />
       </div>
       <div v-if="props.node.description" :class="ui.description()">
         {{ processI18n(props.node.description) }}
       </div>
+      <RolePermissionWarning
+        v-if="props.node.warning"
+        :warnings="[props.node.warning]"
+      />
     </div>
     <span class="flex min-w-0 items-center gap-3">
       <span :class="ui.id()" :title="props.node.id">{{ props.node.id }}</span>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolePermissionTree.vue

@@ -12,6 +12,7 @@ import {
   type PermissionIndex,
   type PermissionRowContext,
   type PermissionSearchHit,
+  selectedWarningsBelow,
   type SelectionState,
 } from "./role-permissions";
 import type { RolePermissionNode } from "./role-types";
@@ -67,6 +68,12 @@ function autoAddedHintOf(id: string): string | undefined {
   return t("page.settings.roles.editor.auto_added", { name: label });
 }
 
+// Only a closed row hides them: an open one shows its children's own.
+function warningsBelowOf(node: RolePermissionNode): string[] {
+  if (props.expanded.has(node.id)) return [];
+  return selectedWarningsBelow(props.index, node.id, props.selection);
+}
+
 function isDisabled(node: RolePermissionNode): boolean {
   if (props.readonly) return true;
   return stateOf(node) === false && !props.canGrant(node.id);
@@ -88,6 +95,7 @@ const rowContext = computed<PermissionRowContext>(() => ({
   changeOf,
   requiresOf,
   autoAddedHintOf,
+  warningsBelowOf,
   isDisabled,
   disabledHint: t("page.settings.roles.editor.not_grantable"),
   toggle: (id, checked) => emit("toggle", id, checked),
@@ -162,6 +170,7 @@ function opensSection(position: number): boolean {
           :state="stateOf(area.node)"
           :is-expanded="props.expanded.has(area.node.id)"
           :disabled="isDisabled(area.node)"
+          :hidden-warnings="warningsBelowOf(area.node)"
           @toggle="(checked) => emit('toggle', area.node.id, checked)"
           @toggle-expanded="emit('toggle-area', area.node.id)"
         >

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolePermissionWarning.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+interface RolePermissionWarningProps {
+  /** i18n keys of the warnings (see the editor tree's `warning`). */
+  warnings: string[];
+  /**
+   * A chip naming the warnings in its tooltip, for a closed row hiding the
+   * permissions they come from; otherwise each warning in full.
+   */
+  compact?: boolean;
+}
+
+const props = withDefaults(defineProps<RolePermissionWarningProps>(), {
+  compact: false,
+});
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+
+const texts = computed(() =>
+  props.warnings.map((warning) => processI18n(warning)),
+);
+</script>
+
+<template>
+  <!-- Amber, not red: these permissions are fine to grant, as long as the
+       admin knows they amount to owner-level access. -->
+  <span
+    v-if="props.compact"
+    class="bg-warning/10 text-warning inline-flex h-[18px] items-center gap-1 rounded px-1.5 font-mono text-[10.5px] font-medium whitespace-nowrap"
+    :title="texts.join('\n')"
+    data-permission-warning-below
+  >
+    <UIcon name="i-ph-warning" class="size-[11px]" />
+    {{ t("page.settings.roles.editor.owner_level") }}
+  </span>
+  <span v-else class="mt-1 flex flex-col gap-1">
+    <span
+      v-for="text in texts"
+      :key="text"
+      class="text-warning flex items-start gap-1.5 text-xs"
+      data-permission-warning
+    >
+      <UIcon name="i-ph-warning" class="mt-px size-3.5 shrink-0" />
+      <span>{{ text }}</span>
+    </span>
+  </span>
+</template>