@alphacifer/slidev-addon-theme 0.0.10 → 0.0.11

package/components/facets/tetrad/{rect-orbit-tetrad/RectOrbitTetradIcon.vue → rectangle-orbit-tetrad/RectangleOrbitTetradIcon.vue}

@@ -1,22 +1,24 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import type { TRectOrbitTetradIcon } from '../../../../utils/rectOrbitTetrad';
+import type { TRectangleOrbitTetradIcon } from '../../../../utils/facets/tetrad/rectangle-orbit-tetrad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
 
 defineOptions({
-  name: 'RectOrbitTetradIcon',
+  inheritAttrs: false,
+  name: 'RectangleOrbitTetradIcon',
 });
 
-export interface IRectOrbitTetradIconProps {
+export interface IRectangleOrbitTetradIconProps {
   readonly size?: number;
   readonly color?: string;
-  readonly icon?: TRectOrbitTetradIcon;
+  readonly icon?: TRectangleOrbitTetradIcon;
 }
 
-const props = withDefaults(defineProps<IRectOrbitTetradIconProps>(), {
+const props = withDefaults(defineProps<IRectangleOrbitTetradIconProps>(), {
   size: 34,
   icon: undefined,
-  color: '#ffffff',
+  color: undefined,
 });
 
 const isStringIcon = computed((): boolean => {
@@ -26,33 +28,37 @@ const isStringIcon = computed((): boolean => {
 const isComponentIcon = computed((): boolean => {
   return typeof props.icon === 'object' && props.icon !== null;
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-rectangle-orbit-tetrad-icon flex items-center justify-center text-(--alpha-rectangle-orbit-tetrad-icon) opacity-82 pointer-events-none select-none',
+);
 </script>
 
 <template>
   <div
     v-if="props.icon !== false"
-    class="alpha-rect-orbit-tetrad-icon flex items-center justify-center pointer-events-none select-none"
+    v-bind="forwardedAttrs()"
+    :class="className()"
     :style="{
-      color: props.color,
       width: `${props.size}px`,
       height: `${props.size}px`,
-      opacity: 0.82,
+      ...(props.color
+        ? { '--alpha-rectangle-orbit-tetrad-icon': props.color }
+        : {}),
     }"
   >
     <slot>
       <component
         :is="props.icon"
         v-if="isComponentIcon"
-        class="w-full h-full"
-        :style="{ color: props.color }"
+        class="w-full h-full text-current"
       />
       <!-- UnoCSS / Iconify class name (e.g. i-lucide-user) -->
       <span
         v-else-if="isStringIcon && (props.icon as string).includes('-')"
         :class="props.icon"
-        class="inline-block"
+        class="inline-block text-current"
         :style="{
-          color: props.color,
           width: `${props.size}px`,
           height: `${props.size}px`,
           fontSize: `${props.size}px`,
@@ -60,6 +66,7 @@ const isComponentIcon = computed((): boolean => {
       />
       <!-- 01 User Silhouette (matching design) -->
       <svg
+        aria-hidden="true"
         v-else-if="props.icon === 'user'"
         viewBox="0 0 24 24"
         fill="currentColor"
@@ -70,6 +77,7 @@ const isComponentIcon = computed((): boolean => {
       </svg>
       <!-- 02 Academic / Mortarboard (matching design) -->
       <svg
+        aria-hidden="true"
         v-else-if="props.icon === 'academic' || props.icon === 'grad'"
         viewBox="0 0 24 24"
         fill="currentColor"
@@ -81,6 +89,7 @@ const isComponentIcon = computed((): boolean => {
       </svg>
       <!-- 03 Briefcase (matching design) -->
       <svg
+        aria-hidden="true"
         v-else-if="props.icon === 'briefcase' || props.icon === 'portfolio'"
         viewBox="0 0 24 24"
         fill="currentColor"
@@ -92,6 +101,7 @@ const isComponentIcon = computed((): boolean => {
       </svg>
       <!-- 04 Target / Bullseye with Dart (matching design) -->
       <svg
+        aria-hidden="true"
         v-else-if="props.icon === 'target' || props.icon === 'bullseye'"
         viewBox="0 0 24 24"
         fill="none"

package/components/facets/tetrad/rectangle-orbit-tetrad/style.css

@@ -0,0 +1,22 @@
+/* Color defaults shared by this component family. */
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-rectangle-orbit-tetrad-center: #2c3e50;
+    --alpha-rectangle-orbit-tetrad-center-bg: #ffffff;
+    --alpha-rectangle-orbit-tetrad-center-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
+    --alpha-rectangle-orbit-tetrad-title: var(--alpha-foreground-primary, #1e293b);
+    --alpha-rectangle-orbit-tetrad-center-content: var(--alpha-foreground-primary, #94a3b8);
+    --alpha-rectangle-orbit-tetrad-connector: #ffffff;
+    --alpha-rectangle-orbit-tetrad-content: var(--alpha-foreground-primary, #555555);
+    --alpha-rectangle-orbit-tetrad-icon: #ffffff;
+    --alpha-rectangle-orbit-tetrad-item-1-color: #f29e4b;
+    --alpha-rectangle-orbit-tetrad-item-2-color: #a4cb81;
+    --alpha-rectangle-orbit-tetrad-item-3-color: #62b6a8;
+    --alpha-rectangle-orbit-tetrad-item-4-color: #e9717a;
+    --alpha-rectangle-orbit-tetrad-card-bg: color-mix(
+      in srgb,
+      var(--alpha-rectangle-orbit-tetrad-item-1-color) 18%,
+      #ffffff
+    );
+  }
+}

package/components/facets/triad/arrow-triad/ArrowTriad.vue

@@ -6,20 +6,17 @@ import {
   onBeforeUpdate,
   provide,
   ref,
-  useSlots,
 } from 'vue';
 
 import {
   ARROW_TRIAD_ROOT_KEY,
   createArrowTriadGeometry,
   getDefaultArrowTriadItem,
-  type IArrowTriadItem,
   resolveArrowTriadItems,
   type TArrowTriadLayout,
-} from '../../../../utils/arrowTriad';
+} from '../../../../utils/facets/triad/arrow-triad';
 import { useDiagramAutoScale } from '../../../../utils/useDiagramAutoScale';
 import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
-import ArrowTriadCallout from './ArrowTriadCallout.vue';
 
 defineOptions({
   name: 'ArrowTriad',
@@ -27,7 +24,6 @@ defineOptions({
 });
 
 export interface IArrowTriadProps {
-  readonly items?: readonly IArrowTriadItem[];
   readonly animation?: boolean;
   readonly height?: number | string;
   readonly startDelay?: number;
@@ -43,7 +39,6 @@ export interface IArrowTriadProps {
 }
 
 const props = withDefaults(defineProps<IArrowTriadProps>(), {
-  items: undefined,
   animation: true,
   height: undefined,
   startDelay: undefined,
@@ -58,8 +53,6 @@ const props = withDefaults(defineProps<IArrowTriadProps>(), {
   offsetX: undefined,
 });
 
-const slots = useSlots();
-
 const shiftingIntro = inject<
   | {
       active: ComputedRef<boolean>;
@@ -97,7 +90,7 @@ const resolvedStartDelay = computed(() => {
 });
 
 const resolvedItems = computed(() => {
-  return resolveArrowTriadItems(props.items);
+  return resolveArrowTriadItems();
 });
 
 let calloutCounter = 0;
@@ -197,14 +190,12 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     :data-hide-pagy="props.hidePagy ? '' : undefined"
     :style="{
       height: resolvedHeightStyle,
-      fontFamily:
-        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-      '--arrow-triad-start-delay': `${resolvedStartDelay}ms`,
+      '--alpha-arrow-triad-start-delay': `${resolvedStartDelay}ms`,
     }"
   >
     <!-- Relative stage container -->
     <div
-      class="alpha-arrow-triad__stage relative w-full h-full min-h-[350px] max-w-[900px] flex items-center justify-center overflow-visible"
+      class="alpha-arrow-triad__stage relative w-full h-full min-h-87.5 max-w-225 flex items-center justify-center overflow-visible"
       :style="{
         transform: stageTransform,
         transformOrigin: 'center center',
@@ -212,138 +203,137 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     >
       <!-- Central SVG graphic: 3 curved arrows + concentric dashed arcs -->
       <div
-        class="alpha-arrow-triad__center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[320px] h-[362px] pointer-events-none"
+        class="alpha-arrow-triad__center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[320px] h-90.5 pointer-events-none"
       >
         <svg
+          aria-hidden="true"
           class="w-full h-full overflow-visible"
           :viewBox="`0 0 ${geo.viewBoxWidth} ${geo.viewBoxHeight}`"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g :transform="is2Left ? `translate(${geo.viewBoxWidth}, 0) scale(-1, 1)` : undefined">
+          <g
+            :transform="is2Left ? `translate(${geo.viewBoxWidth}, 0) scale(-1, 1)` : undefined"
+          >
             <!-- Dashed Guide Arcs -->
             <g
               class="alpha-arrow-triad__dashed"
               :class="{ 'alpha-arrow-triad--animated': isAnimated }"
               fill="none"
-              stroke="#94a3b8"
+              stroke="var(--alpha-arrow-triad-connector-stroke)"
               stroke-width="1.8"
               stroke-dasharray="4 4"
               opacity="0.8"
             >
+              <path v-for="(d, idx) in geo.dashedArcs" :key="idx" :d="d" />
+            </g>
+            <!-- Arrow 0: Yellow Arrow (Top-Right) -->
+            <g
+              class="alpha-arrow-triad__branch alpha-arrow-triad__branch--yellow"
+              :class="{ 'alpha-arrow-triad--animated': isAnimated }"
+            >
+              <path
+                :d="props.triangleHead ? geo.yellowArrow.stemPath : geo.yellowArrow.path"
+                :fill="resolvedItems[0].color"
+              />
+              <polygon
+                v-if="props.triangleHead"
+                :points="geo.yellowArrow.outerHeadPoints"
+                :fill="resolvedItems[0].color"
+                :stroke="resolvedItems[0].depthColor"
+                stroke-width="4"
+                stroke-linejoin="round"
+              />
               <path
-                v-for="(d, idx) in geo.dashedArcs"
-                :key="idx"
-                :d="d"
+                v-else-if="props.neckLine"
+                :d="geo.yellowArrow.neckLine"
+                fill="none"
+                :stroke="resolvedItems[0].depthColor"
+                stroke-width="4"
+                stroke-linecap="round"
+              />
+            </g>
+            <!-- Arrow 1: Green Arrow (Bottom-Right) -->
+            <g
+              class="alpha-arrow-triad__branch alpha-arrow-triad__branch--green"
+              :class="{ 'alpha-arrow-triad--animated': isAnimated }"
+            >
+              <path
+                :d="props.triangleHead ? geo.greenArrow.stemPath : geo.greenArrow.path"
+                :fill="resolvedItems[1].color"
+              />
+              <polygon
+                v-if="props.triangleHead"
+                :points="geo.greenArrow.outerHeadPoints"
+                :fill="resolvedItems[1].color"
+                :stroke="resolvedItems[1].depthColor"
+                stroke-width="4"
+                stroke-linejoin="round"
+              />
+              <path
+                v-else-if="props.neckLine"
+                :d="geo.greenArrow.neckLine"
+                fill="none"
+                :stroke="resolvedItems[1].depthColor"
+                stroke-width="4"
+                stroke-linecap="round"
+              />
+            </g>
+            <!-- Arrow 2: Blue Arrow (Left) -->
+            <g
+              class="alpha-arrow-triad__branch alpha-arrow-triad__branch--blue"
+              :class="{ 'alpha-arrow-triad--animated': isAnimated }"
+            >
+              <path
+                :d="props.triangleHead ? geo.blueArrow.stemPath : geo.blueArrow.path"
+                :fill="resolvedItems[2].color"
+              />
+              <polygon
+                v-if="props.triangleHead"
+                :points="geo.blueArrow.outerHeadPoints"
+                :fill="resolvedItems[2].color"
+                :stroke="resolvedItems[2].depthColor"
+                stroke-width="4"
+                stroke-linejoin="round"
+              />
+              <path
+                v-else-if="props.neckLine"
+                :d="geo.blueArrow.neckLine"
+                fill="none"
+                :stroke="resolvedItems[2].depthColor"
+                stroke-width="4"
+                stroke-linecap="round"
               />
             </g>
-          <!-- Arrow 0: Yellow Arrow (Top-Right) -->
-          <g
-            class="alpha-arrow-triad__branch alpha-arrow-triad__branch--yellow"
-            :class="{ 'alpha-arrow-triad--animated': isAnimated }"
-          >
-            <path
-              :d="props.triangleHead ? geo.yellowArrow.stemPath : geo.yellowArrow.path"
-              :fill="resolvedItems[0].color"
-            />
-            <polygon
-              v-if="props.triangleHead"
-              :points="geo.yellowArrow.outerHeadPoints"
-              :fill="resolvedItems[0].color"
-              :stroke="resolvedItems[0].depthColor"
-              stroke-width="4"
-              stroke-linejoin="round"
-            />
-            <path
-              v-else-if="props.neckLine"
-              :d="geo.yellowArrow.neckLine"
-              fill="none"
-              :stroke="resolvedItems[0].depthColor"
-              stroke-width="4"
-              stroke-linecap="round"
-            />
-          </g>
-          <!-- Arrow 1: Green Arrow (Bottom-Right) -->
-          <g
-            class="alpha-arrow-triad__branch alpha-arrow-triad__branch--green"
-            :class="{ 'alpha-arrow-triad--animated': isAnimated }"
-          >
-            <path
-              :d="props.triangleHead ? geo.greenArrow.stemPath : geo.greenArrow.path"
-              :fill="resolvedItems[1].color"
-            />
-            <polygon
-              v-if="props.triangleHead"
-              :points="geo.greenArrow.outerHeadPoints"
-              :fill="resolvedItems[1].color"
-              :stroke="resolvedItems[1].depthColor"
-              stroke-width="4"
-              stroke-linejoin="round"
-            />
-            <path
-              v-else-if="props.neckLine"
-              :d="geo.greenArrow.neckLine"
-              fill="none"
-              :stroke="resolvedItems[1].depthColor"
-              stroke-width="4"
-              stroke-linecap="round"
-            />
-          </g>
-          <!-- Arrow 2: Blue Arrow (Left) -->
-          <g
-            class="alpha-arrow-triad__branch alpha-arrow-triad__branch--blue"
-            :class="{ 'alpha-arrow-triad--animated': isAnimated }"
-          >
-            <path
-              :d="props.triangleHead ? geo.blueArrow.stemPath : geo.blueArrow.path"
-              :fill="resolvedItems[2].color"
-            />
-            <polygon
-              v-if="props.triangleHead"
-              :points="geo.blueArrow.outerHeadPoints"
-              :fill="resolvedItems[2].color"
-              :stroke="resolvedItems[2].depthColor"
-              stroke-width="4"
-              stroke-linejoin="round"
-            />
-            <path
-              v-else-if="props.neckLine"
-              :d="geo.blueArrow.neckLine"
-              fill="none"
-              :stroke="resolvedItems[2].depthColor"
-              stroke-width="4"
-              stroke-linecap="round"
-            />
           </g>
-        </g>
-      </svg>
+        </svg>
+      </div>
+      <!-- Callout Cards -->
+      <slot />
     </div>
-    <!-- Callout Cards -->
-    <slot>
-      <ArrowTriadCallout :index="0" />
-      <ArrowTriadCallout :index="1" />
-      <ArrowTriadCallout :index="2" />
-    </slot>
   </div>
-</div>
 </template>
 
 <style scoped>
 .alpha-arrow-triad--animated.alpha-arrow-triad__dashed {
-  animation: arrow-triad-dashed-fade 500ms ease-out calc(var(--arrow-triad-start-delay, 0ms) + 100ms) both;
+  animation: arrow-triad-dashed-fade 500ms ease-out
+    calc(var(--alpha-arrow-triad-start-delay, 0ms) + 100ms) both;
 }
 
 .alpha-arrow-triad--animated.alpha-arrow-triad__branch--yellow {
-  animation: arrow-triad-branch-pop 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arrow-triad-start-delay, 0ms) + 50ms) both;
+  animation: arrow-triad-branch-pop 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arrow-triad-start-delay, 0ms) + 50ms) both;
   transform-origin: 349px 319px;
 }
 
 .alpha-arrow-triad--animated.alpha-arrow-triad__branch--green {
-  animation: arrow-triad-branch-pop 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arrow-triad-start-delay, 0ms) + 120ms) both;
+  animation: arrow-triad-branch-pop 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arrow-triad-start-delay, 0ms) + 120ms) both;
   transform-origin: 349px 319px;
 }
 
 .alpha-arrow-triad--animated.alpha-arrow-triad__branch--blue {
-  animation: arrow-triad-branch-pop 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arrow-triad-start-delay, 0ms) + 190ms) both;
+  animation: arrow-triad-branch-pop 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arrow-triad-start-delay, 0ms) + 190ms) both;
   transform-origin: 349px 319px;
 }
 

package/components/facets/triad/arrow-triad/ArrowTriadCallout.vue

@@ -8,37 +8,30 @@ import {
   type IArrowTriadItem,
   type IResolvedArrowTriadItem,
   resolveSingleArrowTriadItem,
-} from '../../../../utils/arrowTriad';
-import ArrowTriadContent from './ArrowTriadContent.vue';
-import ArrowTriadHeading from './ArrowTriadHeading.vue';
-import ArrowTriadIcon from './ArrowTriadIcon.vue';
+} from '../../../../utils/facets/triad/arrow-triad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
 
 defineOptions({
+  inheritAttrs: false,
   name: 'ArrowTriadCallout',
 });
 
 export interface IArrowTriadCalloutProps {
   readonly id?: string | number;
   readonly index?: number;
-  readonly icon?: string | object | false;
   readonly color?: string;
   readonly cardBg?: string;
   readonly textColor?: string;
   readonly titleColor?: string;
-  readonly title?: string;
-  readonly description?: string;
 }
 
 const props = withDefaults(defineProps<IArrowTriadCalloutProps>(), {
   id: undefined,
   index: undefined,
-  icon: undefined,
   color: undefined,
   cardBg: undefined,
   textColor: undefined,
   titleColor: undefined,
-  title: undefined,
-  description: undefined,
 });
 
 interface INamedComponent {
@@ -80,12 +73,9 @@ const activeItem = computed<IResolvedArrowTriadItem>(() => {
   const override: IArrowTriadItem = {
     id: props.id,
     color: props.color,
-    icon: props.icon,
     cardBg: props.cardBg,
     textColor: props.textColor,
     titleColor: props.titleColor,
-    title: props.title,
-    description: props.description,
   };
 
   return resolveSingleArrowTriadItem(
@@ -142,6 +132,12 @@ const contentNode = computed(() => {
   });
 });
 
+const iconNode = computed(() => {
+  return defaultNodes.value.find((node) => {
+    return hasComponentName(node.type, 'ArrowTriadIcon');
+  });
+});
+
 function isValidSlottedNode(node: VNode): boolean {
   if (typeof node.type === 'symbol') {
     return typeof node.children === 'string' && node.children.trim().length > 0;
@@ -155,7 +151,8 @@ const otherSlottedNodes = computed(() => {
     return (
       isValidSlottedNode(node) &&
       !hasComponentName(node.type, 'ArrowTriadHeading') &&
-      !hasComponentName(node.type, 'ArrowTriadContent')
+      !hasComponentName(node.type, 'ArrowTriadContent') &&
+      !hasComponentName(node.type, 'ArrowTriadIcon')
     );
   });
 });
@@ -191,6 +188,7 @@ const positionStyle = computed(() => {
       // Top-Right (aligned with Yellow arrow tip pointing North-East)
       return 'left: calc(50% + 150px); top: calc(50% - 170px);';
     }
+
     case 1: {
       // Bottom-Right (aligned with Green arrow tip pointing South-East)
       return 'left: calc(50% + 150px); top: calc(50% + 15px);';
@@ -209,82 +207,56 @@ const animation = computed(() => {
   return rootContext?.animation?.value ?? true;
 });
 
-const hasIcon = computed(() => {
-  if (slots.icon) {
-    return true;
-  }
-
-  const iconVal = props.icon !== undefined ? props.icon : activeItem.value.icon;
+const hasIcon = computed(() => Boolean(iconNode.value));
 
-  if (!iconVal || iconVal === 'false') {
-    return false;
-  }
-
-  if (typeof iconVal === 'string' && iconVal.trim() === '') {
-    return false;
-  }
-
-  return true;
-});
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arrow-triad-callout absolute w-70 h-38.75 rounded-[20px] px-4 py-3 flex flex-col items-center justify-center text-center z-10 font-sans transition-all duration-300 pointer-events-auto select-none box-border',
+);
 </script>
 
 <template>
   <div
     v-if="resolvedIndex < 3"
+    v-bind="forwardedAttrs()"
     :class="[
-      'alpha-arrow-triad-callout absolute w-[280px] h-[155px] rounded-[20px] px-4 py-3 flex flex-col items-center justify-center text-center z-10 transition-all duration-300 pointer-events-auto select-none box-border shadow-[0_10px_30px_-5px_rgba(0,0,0,0.06),0_4px_6px_-4px_rgba(0,0,0,0.03)]',
+      className(),
       `alpha-arrow-triad-callout--${resolvedIndex}`,
       { 'alpha-arrow-triad-callout--animated': animation },
     ]"
     :style="[
       positionStyle,
-      {
-        backgroundColor: activeItem.cardBg,
-        fontFamily:
-          'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-      },
+      activeItem.cardBg
+        ? { backgroundColor: activeItem.cardBg }
+        : undefined,
     ]"
   >
     <!-- Card Icon Header -->
     <div v-if="hasIcon" class="mb-2 flex items-center justify-center">
-      <slot name="icon">
-        <ArrowTriadIcon :icon="activeItem.icon" :size="32" />
-      </slot>
+      <component :is="iconNode" />
     </div>
     <!-- Title -->
-    <slot name="title">
-      <component :is="headingNode" v-if="headingNode" />
-      <ArrowTriadHeading v-else :color="activeItem.titleColor">
-        {{ activeItem.title }}
-      </ArrowTriadHeading>
-    </slot>
+    <component :is="headingNode" v-if="headingNode" />
     <!-- Description -->
-    <slot name="description">
-      <component :is="contentNode" v-if="contentNode" />
-      <ArrowTriadContent v-else :color="activeItem.textColor">
-        {{ activeItem.description }}
-      </ArrowTriadContent>
-    </slot>
+    <component :is="contentNode" v-if="contentNode" />
     <!-- Other slotted nodes -->
-    <component
-      :is="node"
-      v-for="(node, idx) in otherSlottedNodes"
-      :key="idx"
-    />
+    <component :is="node" v-for="(node, idx) in otherSlottedNodes" :key="idx" />
   </div>
 </template>
 
 <style scoped>
 .alpha-arrow-triad-callout--animated.alpha-arrow-triad-callout--0 {
-  animation: arrow-triad-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arrow-triad-start-delay, 0ms) + 150ms) both;
+  animation: arrow-triad-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arrow-triad-start-delay, 0ms) + 150ms) both;
 }
 
 .alpha-arrow-triad-callout--animated.alpha-arrow-triad-callout--1 {
-  animation: arrow-triad-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arrow-triad-start-delay, 0ms) + 250ms) both;
+  animation: arrow-triad-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arrow-triad-start-delay, 0ms) + 250ms) both;
 }
 
 .alpha-arrow-triad-callout--animated.alpha-arrow-triad-callout--2 {
-  animation: arrow-triad-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arrow-triad-start-delay, 0ms) + 350ms) both;
+  animation: arrow-triad-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arrow-triad-start-delay, 0ms) + 350ms) both;
 }
 
 @keyframes arrow-triad-callout-fade {

package/components/facets/triad/arrow-triad/ArrowTriadContent.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { ARROW_TRIAD_CALLOUT_KEY } from '../../../../utils/arrowTriad';
+import { ARROW_TRIAD_CALLOUT_KEY } from '../../../../utils/facets/triad/arrow-triad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
 
 defineOptions({
+  inheritAttrs: false,
   name: 'ArrowTriadContent',
 });
 
@@ -18,21 +20,24 @@ const props = withDefaults(defineProps<IArrowTriadContentProps>(), {
 const calloutContext = inject(ARROW_TRIAD_CALLOUT_KEY, undefined);
 
 const contentColor = computed(() => {
-  return props.color ?? calloutContext?.item.value.textColor ?? '#64748b';
+  return props.color ?? calloutContext?.item.value.textColor ?? undefined;
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arrow-triad-content font-sans leading-normal text-center font-normal text-(--alpha-arrow-triad-content) select-none',
+);
 </script>
 
 <template>
-  <div
-    class="alpha-arrow-triad-content text-[1rem] leading-[1.5] text-center font-normal select-none"
-    :style="{
-      color: contentColor,
-      fontFamily:
-        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-    }"
+  <p
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="
+      contentColor && !contentColor.includes('--alpha-arrow-triad-content')
+        ? { '--alpha-arrow-triad-content': contentColor }
+        : undefined
+    "
   >
-    <slot>
-      {{ calloutContext?.item.value.description }}
-    </slot>
-  </div>
+    <slot />
+  </p>
 </template>