@alphacifer/slidev-addon-theme 0.0.10 → 0.0.12

package/components/pyramid/circular-pyramid/CircularPyramid.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { activateOnKeyboard } from '../../../utils/activateOnKeyboard';
 import {
   type ComputedRef,
   computed,
@@ -19,14 +20,16 @@ import {
   createCircularPyramidGeometry,
   DEFAULT_CIRCULAR_PYRAMID_COLOR,
   DEFAULT_CIRCULAR_PYRAMID_STACK_COLORS,
-  darkenColor,
-  lightenColor,
   resolveCircularPyramidPalette,
 } from '../../../utils/pyramid/circular-pyramid';
-import { resolvePyramidCardPositions } from '../../../utils/pyramid/shared';
+import { darkenColor, lightenColor } from '../../../utils/colors';
+import {
+  PYRAMID_CONTENT_WIDTH_PX,
+  PYRAMID_TITLE_WIDTH_PX,
+  resolvePyramidCardPositions,
+} from '../../../utils/pyramid/shared';
 import { useDiagramAutoScale } from '../../../utils/useDiagramAutoScale';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
-import CircularPyramidStack from './CircularPyramidStack.vue';
 
 defineOptions({
   inheritAttrs: false,
@@ -103,7 +106,7 @@ export interface ICircularPyramidProps {
 const props = withDefaults(defineProps<ICircularPyramidProps>(), {
   count: undefined,
   activeIndex: -1,
-  color: DEFAULT_CIRCULAR_PYRAMID_COLOR,
+  color: `var(--alpha-circular-pyramid-accent, ${DEFAULT_CIRCULAR_PYRAMID_COLOR})`,
   colors: undefined,
   width: undefined,
   height: undefined,
@@ -177,7 +180,10 @@ interface INamedComponent {
 }
 
 function countSlottedStacks(slotNodes: VNode[] | undefined): number {
-  if (!slotNodes) return 0;
+  if (!slotNodes) {
+    return 0;
+  }
+
   let count = 0;
   for (const node of slotNodes) {
     if (typeof node.type === 'object' && node.type !== null) {
@@ -194,12 +200,16 @@ function countSlottedStacks(slotNodes: VNode[] | undefined): number {
       count += countSlottedStacks(node.children as VNode[]);
     }
   }
+
   return count;
 }
 
 const slottedStackCount = computed(() => {
   const defaultSlotNodes = slots.default?.();
-  if (!defaultSlotNodes) return 0;
+  if (!defaultSlotNodes) {
+    return 0;
+  }
+
   let count = 0;
   for (const node of defaultSlotNodes) {
     if (typeof node.type === 'object' && node.type !== null) {
@@ -216,6 +226,7 @@ const slottedStackCount = computed(() => {
       count += countSlottedStacks(node.children as VNode[]);
     }
   }
+
   return count;
 });
 
@@ -230,6 +241,7 @@ function registerStack(
   if (!registeredStackTokens.value.includes(token)) {
     registeredStackTokens.value.push(token);
   }
+
   let stopWatch: (() => void) | undefined;
   if (colorRef) {
     stopWatch = watch(
@@ -244,6 +256,7 @@ function registerStack(
       { immediate: true },
     );
   }
+
   const index = computed(() => registeredStackTokens.value.indexOf(token));
   return {
     index,
@@ -273,12 +286,13 @@ function getLayerColor(index: number): string {
     return customPaletteColor;
   }
 
-  const stackColor =
-    DEFAULT_CIRCULAR_PYRAMID_STACK_COLORS[
-      Math.abs(index) % DEFAULT_CIRCULAR_PYRAMID_STACK_COLORS.length
-    ];
+  const stackIndex =
+    Math.abs(index) % DEFAULT_CIRCULAR_PYRAMID_STACK_COLORS.length;
+  const stackColor = DEFAULT_CIRCULAR_PYRAMID_STACK_COLORS[stackIndex];
 
-  return stackColor ?? props.color ?? DEFAULT_CIRCULAR_PYRAMID_COLOR;
+  return (
+    stackColor ?? `var(--alpha-circular-pyramid-stack-${stackIndex + 1}-color)`
+  );
 }
 
 const activeLayerColor = computed<string>(() => {
@@ -293,12 +307,15 @@ const resolvedCount = computed(() => {
   if (props.count !== undefined) {
     return clampCircularCount(props.count);
   }
+
   if (slottedStackCount.value > 0) {
     return clampCircularCount(slottedStackCount.value);
   }
+
   if (registeredStackTokens.value.length > 0) {
     return clampCircularCount(registeredStackTokens.value.length);
   }
+
   return 4;
 });
 
@@ -337,14 +354,8 @@ function setActiveIndex(index: number): void {
   emit('select', index);
 }
 
-const TITLE_WIDTH_PX = 150;
-const CONTENT_WIDTH_PX = 240;
-// Content card extends to the right boundary limit (0px offset from right edge)
-const CONTENT_RIGHT_OFFSET_PX = 0;
-
-const titleWidthPx = computed(() => TITLE_WIDTH_PX);
-const contentWidthPx = computed(() => CONTENT_WIDTH_PX);
-const contentRightOffsetPx = computed(() => CONTENT_RIGHT_OFFSET_PX);
+const titleWidthPx = computed(() => PYRAMID_TITLE_WIDTH_PX);
+const contentWidthPx = computed(() => PYRAMID_CONTENT_WIDTH_PX);
 
 const cardHeights = ref<number[]>([]);
 const cardDeltaYList = ref<number[]>([]);
@@ -366,6 +377,7 @@ function getCardDeltaY(index: number): number {
   if (cardDeltaYList.value[index] !== undefined) {
     return cardDeltaYList.value[index] ?? 0;
   }
+
   return initialDeltaYList.value[index] ?? 0;
 }
 
@@ -375,6 +387,7 @@ function updateCardPositions(): void {
   if (typeof window === 'undefined' || !rootRef.value) {
     return;
   }
+
   const cardEls = rootRef.value.querySelectorAll<HTMLElement>(
     '.alpha-circular-pyramid-stack-content',
   );
@@ -404,9 +417,11 @@ function scheduleCardUpdate(): void {
   if (typeof window === 'undefined') {
     return;
   }
+
   if (cardAnimationFrame !== undefined) {
     cancelAnimationFrame(cardAnimationFrame);
   }
+
   cardAnimationFrame = requestAnimationFrame(() => {
     cardAnimationFrame = undefined;
     updateCardPositions();
@@ -422,6 +437,7 @@ onMounted(() => {
     cardResizeObserver = new ResizeObserver(scheduleCardUpdate);
     cardResizeObserver.observe(rootRef.value);
   }
+
   if (typeof MutationObserver !== 'undefined' && rootRef.value) {
     cardMutationObserver = new MutationObserver(scheduleCardUpdate);
     cardMutationObserver.observe(rootRef.value, {
@@ -436,6 +452,7 @@ onUnmounted(() => {
   if (cardAnimationFrame !== undefined) {
     cancelAnimationFrame(cardAnimationFrame);
   }
+
   cardResizeObserver?.disconnect();
   cardMutationObserver?.disconnect();
 });
@@ -450,7 +467,6 @@ provide(CIRCULAR_PYRAMID_ROOT_KEY, {
   interactive: computed(() => props.interactive),
   titleWidthPx,
   contentWidthPx,
-  contentRightOffsetPx,
   registerStack,
   getLayerColor,
   setActiveIndex,
@@ -468,7 +484,6 @@ const lowestLayer = computed(() => {
 });
 
 const uid = Math.random().toString(36).slice(2, 8);
-const filterBlurId = `alpha-circular-pyramid-blur-${uid}`;
 const filterActiveShadowId = `alpha-circular-pyramid-shadow-${uid}`;
 const filterAmbientShadowId = `alpha-circular-pyramid-ambient-${uid}`;
 
@@ -497,7 +512,7 @@ function getActiveShadowId(index: number): string {
   return `alpha-circ-shadow-${uid}-${index}`;
 }
 
-const { resolvedScale, containerHeight } = useDiagramAutoScale({
+const { resolvedScale } = useDiagramAutoScale({
   rootRef,
   baseWidth: props.viewBoxWidth,
   baseHeight: props.viewBoxHeight,
@@ -533,6 +548,7 @@ const resolvedHeightStyle = computed(() => {
   if (resolvedCount.value >= 6) {
     return '480px';
   }
+
   if (resolvedCount.value >= 5) {
     return '450px';
   }
@@ -555,13 +571,14 @@ function handleContainerClick(event: MouseEvent): void {
 }
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-circular-pyramid w-full flex items-center justify-center select-none relative',
+  'alpha-circular-pyramid w-full flex items-center justify-center select-none relative border-0 p-0 m-0 min-w-0 bg-transparent',
 );
 </script>
 
 <template>
-  <div
+  <fieldset
     ref="rootRef"
+    aria-label="Circular pyramid diagram"
     v-bind="forwardedAttrs()"
     :class="className()"
     :data-count="resolvedCount"
@@ -569,14 +586,15 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     :style="{
       width: resolvedWidthStyle,
       height: resolvedHeightStyle,
-      '--circular-pyramid-start-delay': `${resolvedStartDelay}ms`,
-      '--circular-pyramid-title-width': `${titleWidthPx}px`,
-      '--circular-pyramid-content-width': `${contentWidthPx}px`,
+      '--alpha-circular-pyramid-start-delay': `${resolvedStartDelay}ms`,
+      '--alpha-circular-pyramid-stack-heading-width': `${titleWidthPx}px`,
+      '--alpha-circular-pyramid-stack-content-width': `${contentWidthPx}px`,
     }"
     @click="handleContainerClick"
+    @keydown="activateOnKeyboard"
   >
     <div
-      class="alpha-circular-pyramid__stage relative flex items-center justify-center overflow-visible flex-shrink-0"
+      class="alpha-circular-pyramid__stage relative flex items-center justify-center overflow-visible shrink-0"
       :style="{
         width: `${props.viewBoxWidth ?? 960}px`,
         height: `${geo.viewBoxHeight}px`,
@@ -595,33 +613,151 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
           preserveAspectRatio="xMidYMid meet"
           xmlns="http://www.w3.org/2000/svg"
         >
-        <defs>
-          <!-- Per-layer Gradients: Inactive Frosted Glass & Active Luminous -->
-          <template v-for="layer in geo.layers" :key="layer.index">
-            <!-- Inactive Frosted Glass Top Face Gradient (Exact formula matching Image 1 & 2) -->
+          <title>Circular pyramid diagram</title>
+          <defs>
+            <!-- Per-layer Gradients: Inactive Frosted Glass & Active Luminous -->
+            <template v-for="layer in geo.layers" :key="layer.index">
+              <!-- Inactive Frosted Glass Top Face Gradient (Exact formula matching Image 1 & 2) -->
+              <linearGradient
+                :id="getInactiveTopGradId(layer.index)"
+                x1="90%"
+                y1="10%"
+                x2="10%"
+                y2="90%"
+              >
+                <stop
+                  offset="0%"
+                  stop-color="var(--alpha-circular-pyramid-highlight)"
+                  stop-opacity="0.9"
+                />
+                <stop
+                  offset="45%"
+                  stop-color="var(--alpha-circular-pyramid-highlight)"
+                  stop-opacity="0.7"
+                />
+                <stop
+                  offset="80%"
+                  :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.88 })"
+                  stop-opacity="0.5"
+                />
+                <stop
+                  offset="100%"
+                  :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.78 })"
+                  stop-opacity="0.35"
+                />
+              </linearGradient>
+              <!-- Inactive Frosted Glass Rim Gradient (Exact formula matching Image 1 & 2) -->
+              <linearGradient
+                :id="getInactiveSideGradId(layer.index)"
+                x1="0%"
+                y1="0%"
+                x2="100%"
+                y2="0%"
+              >
+                <stop
+                  offset="0%"
+                  :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.65 })"
+                  stop-opacity="0.65"
+                />
+                <stop
+                  offset="50%"
+                  :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.75 })"
+                  stop-opacity="0.5"
+                />
+                <stop
+                  offset="100%"
+                  :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.88 })"
+                  stop-opacity="0.75"
+                />
+              </linearGradient>
+              <!-- Active Luminous Top Face Gradient -->
+              <linearGradient
+                :id="getActiveTopGradId(layer.index)"
+                x1="90%"
+                y1="10%"
+                x2="15%"
+                y2="90%"
+              >
+                <stop
+                  offset="0%"
+                  :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.92 })"
+                  stop-opacity="1"
+                />
+                <stop
+                  offset="28%"
+                  :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.55 })"
+                  stop-opacity="1"
+                />
+                <stop
+                  offset="65%"
+                  :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.15 })"
+                  stop-opacity="1"
+                />
+                <stop
+                  offset="100%"
+                  :stop-color="darkenColor({ hex: getLayerColor(layer.index), ratio: 0.18 })"
+                  stop-opacity="1"
+                />
+              </linearGradient>
+              <!-- Active 3D Rim Gradient -->
+              <linearGradient
+                :id="getActiveSideGradId(layer.index)"
+                x1="0%"
+                y1="0%"
+                x2="100%"
+                y2="0%"
+              >
+                <stop
+                  offset="0%"
+                  :stop-color="darkenColor({ hex: getLayerColor(layer.index), ratio: 0.25 })"
+                />
+                <stop
+                  offset="50%"
+                  :stop-color="darkenColor({ hex: getLayerColor(layer.index), ratio: 0.08 })"
+                />
+                <stop
+                  offset="100%"
+                  :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.45 })"
+                />
+              </linearGradient>
+              <!-- Active Drop Shadow / Glow Filter -->
+              <filter
+                :id="getActiveShadowId(layer.index)"
+                x="-40%"
+                y="-40%"
+                width="180%"
+                height="200%"
+              >
+                <feDropShadow
+                  dx="0"
+                  dy="8"
+                  stdDeviation="10"
+                  :flood-color="getLayerColor(layer.index)"
+                  flood-opacity="0.35"
+                />
+              </filter>
+            </template>
+            <!-- Fallback Global Gradients for Test Spec Compatibility -->
             <linearGradient
-              :id="getInactiveTopGradId(layer.index)"
+              :id="activeTopGradId"
               x1="90%"
               y1="10%"
-              x2="10%"
+              x2="15%"
               y2="90%"
             >
-              <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
-              <stop offset="45%" stop-color="#ffffff" stop-opacity="0.7" />
               <stop
-                offset="80%"
-                :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.88 })"
-                stop-opacity="0.5"
+                offset="0%"
+                :stop-color="lightenColor({ hex: activeLayerColor, ratio: 0.92 })"
+                stop-opacity="1"
               />
               <stop
                 offset="100%"
-                :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.78 })"
-                stop-opacity="0.35"
+                :stop-color="darkenColor({ hex: activeLayerColor, ratio: 0.18 })"
+                stop-opacity="1"
               />
             </linearGradient>
-            <!-- Inactive Frosted Glass Rim Gradient (Exact formula matching Image 1 & 2) -->
             <linearGradient
-              :id="getInactiveSideGradId(layer.index)"
+              :id="activeSideGradId"
               x1="0%"
               y1="0%"
               x2="100%"
@@ -629,52 +765,33 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
             >
               <stop
                 offset="0%"
-                :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.65 })"
-                stop-opacity="0.65"
-              />
-              <stop
-                offset="50%"
-                :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.75 })"
-                stop-opacity="0.5"
+                :stop-color="darkenColor({ hex: activeLayerColor, ratio: 0.25 })"
               />
               <stop
                 offset="100%"
-                :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.88 })"
-                stop-opacity="0.75"
+                :stop-color="lightenColor({ hex: activeLayerColor, ratio: 0.45 })"
               />
             </linearGradient>
-            <!-- Active Luminous Top Face Gradient -->
             <linearGradient
-              :id="getActiveTopGradId(layer.index)"
+              :id="defaultTopGradId"
               x1="90%"
               y1="10%"
-              x2="15%"
+              x2="10%"
               y2="90%"
             >
               <stop
                 offset="0%"
-                :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.92 })"
-                stop-opacity="1"
-              />
-              <stop
-                offset="28%"
-                :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.55 })"
-                stop-opacity="1"
-              />
-              <stop
-                offset="65%"
-                :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.15 })"
-                stop-opacity="1"
+                stop-color="var(--alpha-circular-pyramid-highlight)"
+                stop-opacity="0.9"
               />
               <stop
                 offset="100%"
-                :stop-color="darkenColor({ hex: getLayerColor(layer.index), ratio: 0.18 })"
-                stop-opacity="1"
+                :stop-color="lightenColor({ hex: props.color, ratio: 0.78 })"
+                stop-opacity="0.35"
               />
             </linearGradient>
-            <!-- Active 3D Rim Gradient -->
             <linearGradient
-              :id="getActiveSideGradId(layer.index)"
+              :id="defaultSideGradId"
               x1="0%"
               y1="0%"
               x2="100%"
@@ -682,20 +799,17 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
             >
               <stop
                 offset="0%"
-                :stop-color="darkenColor({ hex: getLayerColor(layer.index), ratio: 0.25 })"
-              />
-              <stop
-                offset="50%"
-                :stop-color="darkenColor({ hex: getLayerColor(layer.index), ratio: 0.08 })"
+                :stop-color="lightenColor({ hex: props.color, ratio: 0.65 })"
+                stop-opacity="0.65"
               />
               <stop
                 offset="100%"
-                :stop-color="lightenColor({ hex: getLayerColor(layer.index), ratio: 0.45 })"
+                :stop-color="lightenColor({ hex: props.color, ratio: 0.88 })"
+                stop-opacity="0.75"
               />
             </linearGradient>
-            <!-- Active Drop Shadow / Glow Filter -->
             <filter
-              :id="getActiveShadowId(layer.index)"
+              :id="filterActiveShadowId"
               x="-40%"
               y="-40%"
               width="180%"
@@ -705,123 +819,103 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
                 dx="0"
                 dy="8"
                 stdDeviation="10"
-                :flood-color="getLayerColor(layer.index)"
+                :flood-color="activeLayerColor"
                 flood-opacity="0.35"
               />
             </filter>
-          </template>
-          <!-- Fallback Global Gradients for Test Spec Compatibility -->
-          <linearGradient :id="activeTopGradId" x1="90%" y1="10%" x2="15%" y2="90%">
-            <stop offset="0%" :stop-color="lightenColor({ hex: activeLayerColor, ratio: 0.92 })" stop-opacity="1" />
-            <stop offset="100%" :stop-color="darkenColor({ hex: activeLayerColor, ratio: 0.18 })" stop-opacity="1" />
-          </linearGradient>
-          <linearGradient :id="activeSideGradId" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" :stop-color="darkenColor({ hex: activeLayerColor, ratio: 0.25 })" />
-            <stop offset="100%" :stop-color="lightenColor({ hex: activeLayerColor, ratio: 0.45 })" />
-          </linearGradient>
-          <linearGradient :id="defaultTopGradId" x1="90%" y1="10%" x2="10%" y2="90%">
-            <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
-            <stop offset="100%" :stop-color="lightenColor({ hex: props.color, ratio: 0.78 })" stop-opacity="0.35" />
-          </linearGradient>
-          <linearGradient :id="defaultSideGradId" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" :stop-color="lightenColor({ hex: props.color, ratio: 0.65 })" stop-opacity="0.65" />
-            <stop offset="100%" :stop-color="lightenColor({ hex: props.color, ratio: 0.88 })" stop-opacity="0.75" />
-          </linearGradient>
-          <filter :id="filterActiveShadowId" x="-40%" y="-40%" width="180%" height="200%">
-            <feDropShadow dx="0" dy="8" stdDeviation="10" :flood-color="activeLayerColor" flood-opacity="0.35" />
-          </filter>
-          <!-- Ambient Bottom Surface Shadow -->
-          <filter
-            :id="filterAmbientShadowId"
-            x="-30%"
-            y="-30%"
-            width="160%"
-            height="160%"
-          >
-            <feGaussianBlur stdDeviation="14" />
-          </filter>
-        </defs>
-        <!-- Ambient Ground Shadow (under the lowest pyramid disc) -->
-        <ellipse
-          v-if="lowestLayer"
-          :cx="geo.viewBoxWidth / 2"
-          :cy="lowestLayer.cy + lowestLayer.cylinderHeight + 14"
-          :rx="lowestLayer.rx * 0.92"
-          :ry="lowestLayer.ry * 0.28"
-          fill="#0f172a"
-          opacity="0.1"
-          :filter="`url(#${filterAmbientShadowId})`"
-        />
-        <!-- Stacked Floating Circular Discs (Rendered from bottom to top) -->
-        <g
-          class="alpha-circular-pyramid__stack"
-          :class="{ 'alpha-circular-pyramid--animated': isAnimated }"
-        >
+            <!-- Ambient Bottom Surface Shadow -->
+            <filter
+              :id="filterAmbientShadowId"
+              x="-30%"
+              y="-30%"
+              width="160%"
+              height="160%"
+            >
+              <feGaussianBlur stdDeviation="14" />
+            </filter>
+          </defs>
+          <!-- Ambient Ground Shadow (under the lowest pyramid disc) -->
+          <ellipse
+            v-if="lowestLayer"
+            :cx="geo.viewBoxWidth / 2"
+            :cy="lowestLayer.cy + lowestLayer.cylinderHeight + 14"
+            :rx="lowestLayer.rx * 0.92"
+            :ry="lowestLayer.ry * 0.28"
+            fill="var(--alpha-circular-pyramid-center)"
+            opacity="0.1"
+            :filter="`url(#${filterAmbientShadowId})`"
+          />
+          <!-- Stacked Floating Circular Discs (Rendered from bottom to top) -->
           <g
-            v-for="layer in stackedLayers"
-            :key="layer.index"
-            class="alpha-circular-pyramid__layer transition-all duration-300 ease-out pointer-events-auto"
-            :class="[
+            class="alpha-circular-pyramid__stack"
+            :class="{ 'alpha-circular-pyramid--animated': isAnimated }"
+          >
+            <g
+              v-for="layer in stackedLayers"
+              :key="layer.index"
+              class="alpha-circular-pyramid__layer transition-all duration-300 ease-out pointer-events-none"
+              :class="[
               layer.index === currentActiveIndex
                 ? 'alpha-circular-pyramid__layer--active'
                 : 'alpha-circular-pyramid__layer--default',
               `alpha-circular-pyramid__layer--${layer.index}`,
-              { 'cursor-pointer': props.interactive },
             ]"
-            :data-layer-index="layer.index"
-            :data-is-active="layer.index === currentActiveIndex"
-            :filter="
+              :data-layer-index="layer.index"
+              :data-is-active="layer.index === currentActiveIndex"
+              :filter="
               layer.index === currentActiveIndex
                 ? `url(#${getActiveShadowId(layer.index)})`
                 : undefined
             "
-            :style="{
+              :style="{
               '--layer-order': layer.index,
-              '--layer-delay': `calc(var(--circular-pyramid-start-delay, 0ms) + ${layer.index * 320 + 10}ms)`,
+              '--layer-delay': `calc(var(--alpha-circular-pyramid-start-delay, 0ms) + ${layer.index * 320 + 10}ms)`,
             }"
-            @click.stop="handleLayerClick(layer.index, $event)"
-          >
-            <!-- 1. 3D Cylindrical Rim (Mantle) -->
-            <path
-              class="alpha-circular-pyramid__rim transition-all duration-300"
-              :d="layer.cylinderPath"
-              :fill="
+            >
+              <!-- 1. 3D Cylindrical Rim (Mantle) -->
+              <path
+                class="alpha-circular-pyramid__rim transition-all duration-300"
+                :d="layer.cylinderPath"
+                :fill="
                 layer.index === currentActiveIndex
                   ? `url(#${getActiveSideGradId(layer.index)})`
                   : `url(#${getInactiveSideGradId(layer.index)})`
               "
-            />
-            <!-- 2. Disc Top Face Ellipse -->
-            <path
-              class="alpha-circular-pyramid__face transition-all duration-300"
-              :d="layer.topEllipsePath"
-              :fill="
+              />
+              <!-- 2. Disc Top Face Ellipse -->
+              <path
+                class="alpha-circular-pyramid__face transition-all duration-300"
+                :d="layer.topEllipsePath"
+                :fill="
                 layer.index === currentActiveIndex
                   ? `url(#${getActiveTopGradId(layer.index)})`
                   : `url(#${getInactiveTopGradId(layer.index)})`
               "
-              :stroke="
+                :stroke="
                 layer.index === currentActiveIndex
                   ? 'none'
-                  : 'rgba(255, 255, 255, 0.5)'
+                  : 'var(--alpha-circular-pyramid-connector-highlight)'
               "
-              stroke-width="0.5"
-            />
+                stroke-width="0.5"
+              />
+            </g>
           </g>
-        </g>
-      </svg>
-    </div>
-    <!-- Slotted or Default Stack Items -->
-      <slot v-if="slots.default" />
-      <template v-else>
-        <CircularPyramidStack
-          v-for="idx in resolvedCount"
-          :key="idx - 1"
-          :index="idx - 1"
-        />
-      </template>
+        </svg>
+        <template v-if="props.interactive">
+          <button
+            v-for="layer in stackedLayers"
+            :key="layer.index"
+            type="button"
+            class="alpha-interaction-control"
+            :aria-label="`Select layer ${layer.index + 1}`"
+            :style="{ clipPath: `path('${layer.cylinderPath}')` }"
+            @click.stop="handleLayerClick(layer.index, $event)"
+          />
+        </template>
+      </div>
+      <slot />
     </div>
-  </div>
+  </fieldset>
 </template>
 
 <style scoped>
@@ -839,7 +933,12 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
 }
 
 .alpha-circular-pyramid--animated .alpha-circular-pyramid__layer {
-  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) var(--layer-delay, calc(var(--circular-pyramid-start-delay, 0ms) + 10ms)) both;
+  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    var(
+      --layer-delay,
+      calc(var(--alpha-circular-pyramid-start-delay, 0ms) + 10ms)
+    )
+    both;
 }
 
 @keyframes alpha-pyramid-layer-enter {