@alphacifer/slidev-addon-theme 0.0.10 → 0.0.12

package/utils/process/arc-arrow-process/resolveArcArrowProcessItems.ts

@@ -0,0 +1,180 @@
+export interface IArcArrowProcessItem {
+  readonly id?: string | number;
+  readonly color?: string;
+  readonly gradientEnd?: string;
+  readonly title?: string;
+  readonly description?: string;
+  readonly icon?: string | object | false;
+  readonly titleColor?: string;
+  readonly textColor?: string;
+}
+
+export interface IResolvedArcArrowProcessItem {
+  readonly id: string | number;
+  readonly color: string;
+  readonly gradientEnd: string;
+  readonly title: string;
+  readonly description: string;
+  readonly icon?: string | object | false;
+  readonly titleColor: string;
+  readonly textColor: string;
+}
+
+const DEFAULT_ARC_ARROW_PROCESS_ITEMS_4: readonly [
+  IResolvedArcArrowProcessItem,
+  IResolvedArcArrowProcessItem,
+  IResolvedArcArrowProcessItem,
+  IResolvedArcArrowProcessItem,
+] = [
+  {
+    id: '01',
+    color: 'var(--alpha-arc-arrow-process-item-1-color)',
+    gradientEnd: 'var(--alpha-arc-arrow-process-item-1-gradient-end)',
+    title: '',
+    description: '',
+    titleColor: 'var(--alpha-arc-arrow-process-heading)',
+    textColor: 'var(--alpha-arc-arrow-process-content)',
+  },
+  {
+    id: '02',
+    color: 'var(--alpha-arc-arrow-process-item-2-color)',
+    gradientEnd: 'var(--alpha-arc-arrow-process-item-2-gradient-end)',
+    title: '',
+    description: '',
+    titleColor: 'var(--alpha-arc-arrow-process-heading)',
+    textColor: 'var(--alpha-arc-arrow-process-content)',
+  },
+  {
+    id: '03',
+    color: 'var(--alpha-arc-arrow-process-item-3-color)',
+    gradientEnd: 'var(--alpha-arc-arrow-process-item-3-gradient-end)',
+    title: '',
+    description: '',
+    titleColor: 'var(--alpha-arc-arrow-process-heading)',
+    textColor: 'var(--alpha-arc-arrow-process-content)',
+  },
+  {
+    id: '04',
+    color: 'var(--alpha-arc-arrow-process-item-4-color)',
+    gradientEnd: 'var(--alpha-arc-arrow-process-item-4-gradient-end)',
+    title: '',
+    description: '',
+    titleColor: 'var(--alpha-arc-arrow-process-heading)',
+    textColor: 'var(--alpha-arc-arrow-process-content)',
+  },
+];
+
+const DEFAULT_ARC_ARROW_PROCESS_ITEMS_3: readonly [
+  IResolvedArcArrowProcessItem,
+  IResolvedArcArrowProcessItem,
+  IResolvedArcArrowProcessItem,
+] = [
+  {
+    id: '01',
+    color: 'var(--alpha-arc-arrow-process-item-1-color)',
+    gradientEnd: 'var(--alpha-arc-arrow-process-item-1-gradient-end)',
+    title: '',
+    description: '',
+    titleColor: 'var(--alpha-arc-arrow-process-heading)',
+    textColor: 'var(--alpha-arc-arrow-process-content)',
+  },
+  {
+    id: '02',
+    color: 'var(--alpha-arc-arrow-process-item-2-color)',
+    gradientEnd: 'var(--alpha-arc-arrow-process-item-2-gradient-end)',
+    title: '',
+    description: '',
+    titleColor: 'var(--alpha-arc-arrow-process-heading)',
+    textColor: 'var(--alpha-arc-arrow-process-content)',
+  },
+  {
+    id: '03',
+    color: 'var(--alpha-arc-arrow-process-item-4-color)',
+    gradientEnd: 'var(--alpha-arc-arrow-process-item-4-gradient-end)',
+    title: '',
+    description: '',
+    titleColor: 'var(--alpha-arc-arrow-process-heading)',
+    textColor: 'var(--alpha-arc-arrow-process-content)',
+  },
+];
+
+const DEFAULT_ARC_ARROW_PROCESS_ITEMS_2: readonly [
+  IResolvedArcArrowProcessItem,
+  IResolvedArcArrowProcessItem,
+] = [
+  {
+    id: '01',
+    color: 'var(--alpha-arc-arrow-process-item-2-color)',
+    gradientEnd: 'var(--alpha-arc-arrow-process-item-2-gradient-end)',
+    title: '',
+    description: '',
+    titleColor: 'var(--alpha-arc-arrow-process-heading)',
+    textColor: 'var(--alpha-arc-arrow-process-content)',
+  },
+  {
+    id: '02',
+    color: 'var(--alpha-arc-arrow-process-item-3-color)',
+    gradientEnd: 'var(--alpha-arc-arrow-process-item-3-gradient-end)',
+    title: '',
+    description: '',
+    titleColor: 'var(--alpha-arc-arrow-process-heading)',
+    textColor: 'var(--alpha-arc-arrow-process-content)',
+  },
+];
+
+export function getDefaultArcArrowProcessItem(
+  index: number,
+  count: number = 4,
+): IResolvedArcArrowProcessItem {
+  const list =
+    count === 2
+      ? DEFAULT_ARC_ARROW_PROCESS_ITEMS_2
+      : count === 3
+        ? DEFAULT_ARC_ARROW_PROCESS_ITEMS_3
+        : DEFAULT_ARC_ARROW_PROCESS_ITEMS_4;
+  const safe = Math.abs(index) % list.length;
+  const item = list[safe];
+
+  if (item) {
+    return item;
+  }
+
+  return DEFAULT_ARC_ARROW_PROCESS_ITEMS_4[0];
+}
+
+export function resolveSingleArcArrowProcessItem(
+  item: IArcArrowProcessItem | undefined,
+  fallbackIndex = 0,
+  count: number = 4,
+): IResolvedArcArrowProcessItem {
+  const fallback = getDefaultArcArrowProcessItem(fallbackIndex, count);
+
+  if (!item) {
+    return fallback;
+  }
+
+  return {
+    id: item.id ?? fallback.id,
+    color: item.color ?? fallback.color,
+    gradientEnd: item.gradientEnd ?? fallback.gradientEnd,
+    title: item.title ?? fallback.title,
+    description: item.description ?? fallback.description,
+    icon: item.icon !== undefined ? item.icon : fallback.icon,
+    titleColor: item.titleColor ?? fallback.titleColor,
+    textColor: item.textColor ?? fallback.textColor,
+  };
+}
+
+export function resolveArcArrowProcessItems(
+  items: readonly IArcArrowProcessItem[] | undefined,
+  count: number = 4,
+): readonly IResolvedArcArrowProcessItem[] {
+  const targetCount = count >= 2 ? count : 4;
+  const result: IResolvedArcArrowProcessItem[] = [];
+
+  for (let i = 0; i < targetCount; i++) {
+    result.push(resolveSingleArcArrowProcessItem(items?.[i], i, targetCount));
+  }
+
+  return result;
+}

package/utils/pyramid/circular-pyramid/context.ts

@@ -1,10 +1,8 @@
 import type { ComputedRef, InjectionKey, Ref } from 'vue';
 
-import type { IPyramidPalette, IPyramidRegistration } from '../shared';
+import type { IPyramidPalette } from '../shared';
 import type { ICircularLayerGeometry, ICircularPyramidGeometry } from './types';
 
-export interface ICircularPyramidRegistration extends IPyramidRegistration {}
-
 export interface ICircularPyramidRootContext {
   readonly count: ComputedRef<number>;
   readonly activeIndex: Ref<number> | ComputedRef<number>;
@@ -15,7 +13,6 @@ export interface ICircularPyramidRootContext {
   readonly interactive: ComputedRef<boolean>;
   readonly titleWidthPx: ComputedRef<number>;
   readonly contentWidthPx: ComputedRef<number>;
-  readonly contentRightOffsetPx: ComputedRef<number>;
   readonly registerStack: (
     id?: symbol,
     color?: ComputedRef<string | undefined>,

package/utils/pyramid/circular-pyramid/createCircularPyramidGeometry.ts

@@ -2,8 +2,6 @@ import {
   clampPyramidCount,
   computePyramidStacking,
   DEFAULT_PYRAMID_COLOR,
-  darkenColor,
-  lightenColor,
   MAX_PYRAMID_COUNT,
   MIN_PYRAMID_COUNT,
   resolvePyramidPalette,
@@ -17,19 +15,17 @@ import type {
 
 export const DEFAULT_CIRCULAR_PYRAMID_COLOR = DEFAULT_PYRAMID_COLOR;
 export const DEFAULT_CIRCULAR_PYRAMID_STACK_COLORS: readonly string[] = [
-  '#3b82f6', // 0: Blue
-  '#6366f1', // 1: Indigo
-  '#10b981', // 2: Emerald
-  '#f59e0b', // 3: Amber
-  '#ec4899', // 4: Pink
-  '#06b6d4', // 5: Cyan
+  'var(--alpha-circular-pyramid-stack-1-color)',
+  'var(--alpha-circular-pyramid-stack-2-color)',
+  'var(--alpha-circular-pyramid-stack-3-color)',
+  'var(--alpha-circular-pyramid-stack-4-color)',
+  'var(--alpha-circular-pyramid-stack-5-color)',
+  'var(--alpha-circular-pyramid-stack-6-color)',
 ] as const;
 
 export const MIN_CIRCULAR_COUNT = MIN_PYRAMID_COUNT;
 export const MAX_CIRCULAR_COUNT = MAX_PYRAMID_COUNT;
 
-export { darkenColor, lightenColor };
-
 export function clampCircularCount(count?: number): number {
   return clampPyramidCount(count);
 }

package/utils/pyramid/shared/colors.ts

@@ -1,92 +1,42 @@
-import { DEFAULT_PYRAMID_COLOR } from './constants';
-import type { IColorModifierParams, IPyramidPalette } from './types';
-
-export function lightenColor({
-  hex,
-  ratio = 0.5,
-}: IColorModifierParams): string {
-  const raw = hex.trim().replace(/^#/, '');
-  const sanitized =
-    raw.length === 3
-      ? raw
-          .split('')
-          .map((char) => char + char)
-          .join('')
-      : raw;
-
-  if (sanitized.length !== 6) {
-    return hex;
-  }
-
-  const r = Number.parseInt(sanitized.slice(0, 2), 16);
-  const g = Number.parseInt(sanitized.slice(2, 4), 16);
-  const b = Number.parseInt(sanitized.slice(4, 6), 16);
-
-  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-    return hex;
-  }
-
-  const clamp = (val: number): number =>
-    Math.min(255, Math.max(0, Math.round(val)));
-  const lr = clamp(r + (255 - r) * ratio);
-  const lg = clamp(g + (255 - g) * ratio);
-  const lb = clamp(b + (255 - b) * ratio);
-
-  const toHex = (n: number): string => n.toString(16).padStart(2, '0');
-
-  return `#${toHex(lr)}${toHex(lg)}${toHex(lb)}`;
-}
-
-export function darkenColor({
-  hex,
-  ratio = 0.5,
-}: IColorModifierParams): string {
-  const raw = hex.trim().replace(/^#/, '');
-  const sanitized =
-    raw.length === 3
-      ? raw
-          .split('')
-          .map((char) => char + char)
-          .join('')
-      : raw;
-
-  if (sanitized.length !== 6) {
-    return hex;
-  }
-
-  const r = Number.parseInt(sanitized.slice(0, 2), 16);
-  const g = Number.parseInt(sanitized.slice(2, 4), 16);
-  const b = Number.parseInt(sanitized.slice(4, 6), 16);
-
-  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-    return hex;
-  }
-
-  const clamp = (val: number): number =>
-    Math.min(255, Math.max(0, Math.round(val)));
-  const dr = clamp(r * (1 - ratio));
-  const dg = clamp(g * (1 - ratio));
-  const db = clamp(b * (1 - ratio));
-
-  const toHex = (n: number): string => n.toString(16).padStart(2, '0');
-
-  return `#${toHex(dr)}${toHex(dg)}${toHex(db)}`;
-}
+import { darkenColor, lightenColor } from '../../colors';
+import { DEFAULT_PYRAMID_COLOR, DEFAULT_PYRAMID_HIGHLIGHT } from './constants';
+import type { IPyramidPalette } from './types';
 
 export function resolvePyramidPalette(
   baseColor: string = DEFAULT_PYRAMID_COLOR,
 ): IPyramidPalette {
   return {
-    activeTopStart: lightenColor({ hex: baseColor, ratio: 0.82 }),
+    activeTopStart: lightenColor({
+      hex: baseColor,
+      ratio: 0.82,
+    }),
     activeTopEnd: baseColor,
-    activeSideStart: darkenColor({ hex: baseColor, ratio: 0.28 }),
-    activeSideEnd: lightenColor({ hex: baseColor, ratio: 0.35 }),
-    activeStroke: lightenColor({ hex: baseColor, ratio: 0.7 }),
-    defaultTopStart: '#ffffff',
-    defaultTopEnd: lightenColor({ hex: baseColor, ratio: 0.88 }),
-    defaultSideStart: lightenColor({ hex: baseColor, ratio: 0.72 }),
-    defaultSideEnd: lightenColor({ hex: baseColor, ratio: 0.88 }),
-    defaultStroke: '#ffffff',
+    activeSideStart: darkenColor({
+      hex: baseColor,
+      ratio: 0.28,
+    }),
+    activeSideEnd: lightenColor({
+      hex: baseColor,
+      ratio: 0.35,
+    }),
+    activeStroke: lightenColor({
+      hex: baseColor,
+      ratio: 0.7,
+    }),
+    defaultTopStart: DEFAULT_PYRAMID_HIGHLIGHT,
+    defaultTopEnd: lightenColor({
+      hex: baseColor,
+      ratio: 0.88,
+    }),
+    defaultSideStart: lightenColor({
+      hex: baseColor,
+      ratio: 0.72,
+    }),
+    defaultSideEnd: lightenColor({
+      hex: baseColor,
+      ratio: 0.88,
+    }),
+    defaultStroke: DEFAULT_PYRAMID_HIGHLIGHT,
     glow: baseColor,
   };
 }

package/utils/pyramid/shared/constants.ts

@@ -1,9 +1,9 @@
-export const DEFAULT_PYRAMID_COLOR = '#3b82f6';
+export const DEFAULT_PYRAMID_COLOR = 'var(--alpha-pyramid-accent)';
+export const DEFAULT_PYRAMID_HIGHLIGHT = 'var(--alpha-pyramid-highlight)';
 export const MIN_PYRAMID_COUNT = 1;
 export const MAX_PYRAMID_COUNT = 6;
 
 export const PYRAMID_TITLE_WIDTH_PX = 150;
 export const PYRAMID_CONTENT_WIDTH_PX = 240;
-export const PYRAMID_CONTENT_RIGHT_OFFSET_PX = 0;
 export const PYRAMID_DOT_POSITION_X = 210;
 export const PYRAMID_DOT_GAP_PX = 10;

package/utils/pyramid/shared/types.ts

@@ -1,8 +1,3 @@
-export interface IColorModifierParams {
-  readonly hex: string;
-  readonly ratio?: number;
-}
-
 export interface IPyramidPalette {
   readonly activeTopStart: string;
   readonly activeTopEnd: string;

package/utils/pyramid/square-pyramid/context.ts

@@ -1,10 +1,8 @@
 import type { ComputedRef, InjectionKey, Ref } from 'vue';
 
-import type { IPyramidPalette, IPyramidRegistration } from '../shared';
+import type { IPyramidPalette } from '../shared';
 import type { ISquareLayerGeometry, ISquarePyramidGeometry } from './types';
 
-export interface ISquarePyramidRegistration extends IPyramidRegistration {}
-
 export interface ISquarePyramidRootContext {
   readonly count: ComputedRef<number>;
   readonly activeIndex: Ref<number> | ComputedRef<number>;
@@ -15,7 +13,6 @@ export interface ISquarePyramidRootContext {
   readonly interactive: ComputedRef<boolean>;
   readonly titleWidthPx: ComputedRef<number>;
   readonly contentWidthPx: ComputedRef<number>;
-  readonly contentRightOffsetPx: ComputedRef<number>;
   readonly registerStack: (
     id?: symbol,
     color?: ComputedRef<string | undefined>,

package/utils/pyramid/square-pyramid/createSquarePyramidGeometry.ts

@@ -2,8 +2,6 @@ import {
   clampPyramidCount,
   computePyramidStacking,
   DEFAULT_PYRAMID_COLOR,
-  darkenColor,
-  lightenColor,
   MAX_PYRAMID_COUNT,
   MIN_PYRAMID_COUNT,
   resolvePyramidPalette,
@@ -17,19 +15,17 @@ import type {
 
 export const DEFAULT_SQUARE_PYRAMID_COLOR = DEFAULT_PYRAMID_COLOR;
 export const DEFAULT_SQUARE_PYRAMID_STACK_COLORS: readonly string[] = [
-  '#ec4899', // 0: Pink (matches top slab)
-  '#8b5cf6', // 1: Purple (matches 2nd slab)
-  '#3b82f6', // 2: Blue (matches 3rd slab)
-  '#06b6d4', // 3: Cyan (matches 4th slab)
-  '#14b8a6', // 4: Teal (matches 5th slab)
-  '#f59e0b', // 5: Amber (warm accent)
+  'var(--alpha-square-pyramid-stack-1-color)',
+  'var(--alpha-square-pyramid-stack-2-color)',
+  'var(--alpha-square-pyramid-stack-3-color)',
+  'var(--alpha-square-pyramid-stack-4-color)',
+  'var(--alpha-square-pyramid-stack-5-color)',
+  'var(--alpha-square-pyramid-stack-6-color)',
 ] as const;
 
 export const MIN_SQUARE_COUNT = MIN_PYRAMID_COUNT;
 export const MAX_SQUARE_COUNT = MAX_PYRAMID_COUNT;
 
-export { darkenColor, lightenColor };
-
 export function clampSquareCount(count?: number): number {
   return clampPyramidCount(count);
 }

package/utils/useDiagramAutoScale.ts

@@ -46,7 +46,7 @@ function resolveValue<T>(val: Ref<T> | (() => T) | undefined, fallback: T): T {
 
 /**
  * Automatically computes a scale factor (via CSS transform: scale)
- * so that diagram components (ArrowTriad, RectOrbitTetrad, ArcArrowProcess, etc.)
+ * so that diagram components (ArrowTriad, RectangleOrbitTetrad, ArcArrowProcess, etc.)
  * fit comfortably inside the available slide canvas without clipping or overlaying pagination.
  */
 export function useDiagramAutoScale(
@@ -156,16 +156,14 @@ export function useDiagramAutoScale(
         pagyEl && window.getComputedStyle(pagyEl).display !== 'none';
       const clearance = isPagyVisible ? pagyClearance : 16;
 
-      // Check for internal component header inside el (e.g. ArcDiD, GearTriad, HexTriad)
+      // Check for internal component header inside el (e.g. ArcDefenseInDepth, GearTriad, HexagonTriad)
       let internalHeaderH = 0;
       for (let i = 0; i < el.children.length; i++) {
         const child = el.children[i];
         if (
           child instanceof HTMLElement &&
           (child.tagName === 'HEADER' ||
-            child.classList.contains('alpha-arc-did__header') ||
-            child.classList.contains('alpha-gear-triad__header') ||
-            child.classList.contains('alpha-hex-triad__header'))
+            child.classList.contains('alpha-arc-defense-in-depth__header'))
         ) {
           internalHeaderH += child.offsetHeight;
           const cs = window.getComputedStyle(child);
@@ -201,7 +199,11 @@ export function useDiagramAutoScale(
                   (Number.parseFloat(cs.marginBottom) || 0);
               }
             }
-            if (p === slideEl) break;
+
+            if (p === slideEl) {
+              break;
+            }
+
             curr = p;
           }
         }

package/utils/useMergedUnoAttrs.ts

@@ -1,12 +1,12 @@
 import { useAttrs } from 'vue';
 
-import { mergeUno } from './mergeUno';
-import type { TUnoClassValue } from './mergeUno/types';
+import { mergeUno } from './merge-uno';
+import type { TUnoClassValue } from './merge-uno/types';
 
 type TUnoClassSource = TUnoClassValue | (() => TUnoClassValue);
 
 interface IUseMergedUnoAttrsResult {
-  readonly className: () => string;
+  readonly className: (...extraDefaults: TUnoClassValue[]) => string;
   readonly forwardedAttrs: () => Record<string, unknown>;
 }
 
@@ -20,11 +20,15 @@ export function useMergedUnoAttrs(
 ): IUseMergedUnoAttrsResult {
   const attrs = useAttrs();
 
-  const className = (): string => {
+  const className = (...extraDefaults: TUnoClassValue[]): string => {
     const resolvedDefaults =
       typeof defaultClasses === 'function' ? defaultClasses() : defaultClasses;
 
-    return mergeUno(resolvedDefaults, attrs.class as TUnoClassValue);
+    return mergeUno(
+      resolvedDefaults,
+      ...extraDefaults,
+      attrs.class as TUnoClassValue,
+    );
   };
 
   const forwardedAttrs = (): Record<string, unknown> => {

package/components/card/chevron-card/ChevronCardHeading.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-import { CHEVRON_CARD_KEY } from '../../../utils/chevronCard';
-
-defineOptions({
-  name: 'ChevronCardHeading',
-});
-
-export interface IChevronCardHeadingProps {
-  readonly color?: string;
-}
-
-const props = withDefaults(defineProps<IChevronCardHeadingProps>(), {
-  color: undefined,
-});
-
-const cardContext = inject(CHEVRON_CARD_KEY, undefined);
-
-const headingColor = computed(() => {
-  return props.color ?? cardContext?.titleColor.value ?? '#4b5563';
-});
-</script>
-
-<template>
-  <div
-    class="alpha-chevron-card-heading font-bold text-[1.25rem] uppercase tracking-wider leading-tight select-none font-sans"
-    :style="{
-      color: headingColor,
-      padding: 0,
-      fontSize: '1.25rem',
-      fontFamily:
-        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-      marginBottom: '0.25rem',
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/components/card/horiz-card/HorizCardHeading.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-import { HORIZ_CARD_KEY } from '../../../utils/horizCard';
-import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
-
-defineOptions({
-  inheritAttrs: false,
-  name: 'HorizCardHeading',
-});
-
-export interface IHorizCardHeadingProps {
-  /**
-   * Title text color. Overrides context titleColor.
-   */
-  readonly color?: string;
-}
-
-const props = withDefaults(defineProps<IHorizCardHeadingProps>(), {
-  color: undefined,
-});
-
-const context = inject(HORIZ_CARD_KEY, undefined);
-
-const headingColor = computed(() => {
-  return (
-    props.color ??
-    context?.titleColor.value ??
-    context?.color.value ??
-    '#ea583a'
-  );
-});
-
-const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-horiz-card-heading font-sans font-bold text-xl tracking-tight leading-tight',
-);
-</script>
-
-<template>
-  <h3
-    v-bind="forwardedAttrs()"
-    :class="className()"
-    :style="{ color: headingColor }"
-  >
-    <slot>Lorem Ipsum</slot>
-  </h3>
-</template>

package/components/card/vert-card/VertCardHeading.vue

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
-import { VERT_CARD_KEY } from '../../../utils/vertCard';
-
-defineOptions({
-  inheritAttrs: false,
-  name: 'VertCardHeading',
-});
-
-export interface IVertCardHeadingProps {
-  /**
-   * Title text color. Overrides context titleColor.
-   */
-  readonly color?: string;
-  /**
-   * Whether to render the decorative horizontal line with center dot below the title.
-   * @default true
-   */
-  readonly hasDivider?: boolean;
-}
-
-const props = withDefaults(defineProps<IVertCardHeadingProps>(), {
-  color: undefined,
-  hasDivider: true,
-});
-
-const context = inject(VERT_CARD_KEY, undefined);
-
-const headingColor = computed(() => {
-  return (
-    props.color ??
-    context?.titleColor.value ??
-    context?.color.value ??
-    '#ea583a'
-  );
-});
-
-const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-vert-card-heading font-sans font-bold text-xl tracking-tight leading-tight text-center',
-);
-</script>
-
-<template>
-  <div class="flex flex-col items-center w-full">
-    <h3
-      v-bind="forwardedAttrs()"
-      :class="className()"
-      :style="{ color: headingColor }"
-    >
-      <slot>Lorem Ipsum</slot>
-    </h3>
-    <div
-      v-if="props.hasDivider"
-      class="mt-2.5 flex items-center justify-center w-32 relative"
-    >
-      <div
-        class="w-full h-[1.5px]"
-        :style="{ backgroundColor: headingColor }"
-      />
-      <span
-        class="absolute w-2 h-2 rounded-full"
-        :style="{ backgroundColor: headingColor }"
-      />
-    </div>
-  </div>
-</template>