@alphacifer/slidev-addon-theme 0.0.9 → 0.0.11

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,8 +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

@@ -14,6 +14,9 @@ export interface IUseDiagramAutoScaleOptions {
   readonly scale?: Ref<number | undefined> | (() => number | undefined);
   readonly autoScale?: Ref<boolean | undefined> | (() => boolean | undefined);
   readonly maxScale?: Ref<number | undefined> | (() => number | undefined);
+  readonly width?:
+    | Ref<number | string | undefined>
+    | (() => number | string | undefined);
   readonly height?:
     | Ref<number | string | undefined>
     | (() => number | string | undefined);
@@ -43,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(
@@ -94,6 +97,19 @@ export function useDiagramAutoScale(
       availW = el.clientWidth;
     }
 
+    const explicitWidth = resolveValue(options.width, undefined);
+    if (typeof explicitWidth === 'number' && explicitWidth > 0) {
+      availW = availW > 0 ? Math.min(availW, explicitWidth) : explicitWidth;
+    } else if (
+      typeof explicitWidth === 'string' &&
+      explicitWidth.endsWith('px')
+    ) {
+      const parsedW = Number.parseFloat(explicitWidth);
+      if (parsedW > 0) {
+        availW = availW > 0 ? Math.min(availW, parsedW) : parsedW;
+      }
+    }
+
     // Available height inside parent or slide layout
     let availH = 0;
     const explicitHeight = resolveValue(options.height, undefined);
@@ -140,6 +156,23 @@ export function useDiagramAutoScale(
         pagyEl && window.getComputedStyle(pagyEl).display !== 'none';
       const clearance = isPagyVisible ? pagyClearance : 16;
 
+      // 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-defense-in-depth__header'))
+        ) {
+          internalHeaderH += child.offsetHeight;
+          const cs = window.getComputedStyle(child);
+          internalHeaderH +=
+            (Number.parseFloat(cs.marginTop) || 0) +
+            (Number.parseFloat(cs.marginBottom) || 0);
+        }
+      }
+
       if (slideEl && slideEl.clientHeight > 0) {
         const slideStyle = window.getComputedStyle(slideEl);
         const sPadTop = Number.parseFloat(slideStyle.paddingTop) || 0;
@@ -148,21 +181,30 @@ export function useDiagramAutoScale(
         let slideSiblingsH = siblingsH;
 
         if (parent !== slideEl) {
-          for (let i = 0; i < slideEl.children.length; i++) {
-            const child = slideEl.children[i];
-
-            if (
-              child &&
-              child !== parent &&
-              !child.contains(parent) &&
-              child instanceof HTMLElement
-            ) {
-              slideSiblingsH += child.offsetHeight;
-              const cs = window.getComputedStyle(child);
-              slideSiblingsH +=
-                (Number.parseFloat(cs.marginTop) || 0) +
-                (Number.parseFloat(cs.marginBottom) || 0);
+          let curr: HTMLElement | null = parent;
+          while (curr && curr !== slideEl && curr.parentElement) {
+            const p: HTMLElement = curr.parentElement;
+            for (let i = 0; i < p.children.length; i++) {
+              const child = p.children[i];
+              if (
+                child &&
+                child !== curr &&
+                !child.contains(curr) &&
+                child instanceof HTMLElement
+              ) {
+                slideSiblingsH += child.offsetHeight;
+                const cs = window.getComputedStyle(child);
+                slideSiblingsH +=
+                  (Number.parseFloat(cs.marginTop) || 0) +
+                  (Number.parseFloat(cs.marginBottom) || 0);
+              }
             }
+
+            if (p === slideEl) {
+              break;
+            }
+
+            curr = p;
           }
         }
 
@@ -172,12 +214,18 @@ export function useDiagramAutoScale(
             sPadTop -
             sPadBottom -
             slideSiblingsH -
+            internalHeaderH -
             clearance,
         );
       } else if (parent.clientHeight > 0) {
         availH = Math.max(
           0,
-          parent.clientHeight - padTop - padBottom - siblingsH - clearance,
+          parent.clientHeight -
+            padTop -
+            padBottom -
+            siblingsH -
+            internalHeaderH -
+            clearance,
         );
       }
     }

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>