@alphacifer/slidev-addon-theme 0.0.7 → 0.0.9

package/README.md

@@ -2,6 +2,9 @@
 
 Shared Slidev components and layouts for Alpha presentations.
 
+For the pre-refactor inventory of all components, props, slots, layouts, and
+migration-sensitive behavior, see [Component baseline](./COMPONENTS_BASELINE.md).
+
 For Alpha's light-only academic styling, combine this addon with
 `@alphacifer/slidev-theme-academic`.
 
@@ -58,6 +61,33 @@ addons:
 </HexTriad>
 ```
 
+## Gear triad
+
+- Components: `GearTriad`, `GearTriadCallout`, `GearTriadHeading`, `GearTriadDescription`, `GearTriadContents`, `GearTriadContent`, `GearTriadIcon`, `GearTriadCenter`
+
+```vue
+<GearTriad>
+  <GearTriadCallout>
+    <GearTriadHeading>Option 1</GearTriadHeading>
+    <GearTriadDescription>
+      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.
+    </GearTriadDescription>
+  </GearTriadCallout>
+  <GearTriadCallout>
+    <GearTriadHeading>Option 2</GearTriadHeading>
+    <GearTriadDescription>
+      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.
+    </GearTriadDescription>
+  </GearTriadCallout>
+  <GearTriadCallout>
+    <GearTriadHeading>Option 3</GearTriadHeading>
+    <GearTriadDescription>
+      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.
+    </GearTriadDescription>
+  </GearTriadCallout>
+</GearTriad>
+```
+
 ## Horiz card
 
 - Components: `HorizCard`, `HorizCardBadge`, `HorizCardHeading`, `HorizCardContent`, `HorizCardIcon`
@@ -83,105 +113,185 @@ addons:
 </HorizCard>
 ```
 
-## Arc compare
+## Arc comparison
 
-- Components: `ArcCompare`, `ArcCompareLeft`, `ArcCompareRight`, `ArcCompareTitle`, `ArcCompareContents`, `ArcCompareCallout`, `ArcCompareBadge`, `ArcCompareHeading`, `ArcCompareContent`
+- Components: `ArcComparison`, `ArcComparisonLeft`, `ArcComparisonRight`, `ArcComparisonTitle`, `ArcComparisonContents`, `ArcComparisonOrbit`, `ArcComparisonBadge`, `ArcComparisonHeading`, `ArcComparisonContent`
 
 ```vue
 <!-- Self-contained mockup default (3 points) -->
 
 <!-- 4 points mode -->
-<ArcCompare>
-  <ArcCompareLeft color="#ea580c">
-    <ArcCompareTitle>Traditional<br />Monolith</ArcCompareTitle>
-    <ArcCompareContents>
-      <ArcCompareCallout>
-        <ArcCompareBadge>01</ArcCompareBadge>
-        <ArcCompareHeading>Coupled State</ArcCompareHeading>
-        <ArcCompareContent>
+<ArcComparison>
+  <ArcComparisonLeft color="#ea580c">
+    <ArcComparisonTitle>Traditional<br />Monolith</ArcComparisonTitle>
+    <ArcComparisonContents>
+      <ArcComparisonOrbit>
+        <ArcComparisonBadge>01</ArcComparisonBadge>
+        <ArcComparisonHeading>Coupled State</ArcComparisonHeading>
+        <ArcComparisonContent>
           Shared database schemas create cross-team deployment bottlenecks.
-        </ArcCompareContent>
-      </ArcCompareCallout>
-      <ArcCompareCallout>
-        <ArcCompareBadge>02</ArcCompareBadge>
-        <ArcCompareHeading>Vertical Scale</ArcCompareHeading>
-        <ArcCompareContent>
+        </ArcComparisonContent>
+      </ArcComparisonOrbit>
+      <ArcComparisonOrbit>
+        <ArcComparisonBadge>02</ArcComparisonBadge>
+        <ArcComparisonHeading>Vertical Scale</ArcComparisonHeading>
+        <ArcComparisonContent>
           Requires upgrading single instances with exponential cost increases.
-        </ArcCompareContent>
-      </ArcCompareCallout>
-      <ArcCompareCallout>
-        <ArcCompareBadge>03</ArcCompareBadge>
-        <ArcCompareHeading>Single Failure</ArcCompareHeading>
-        <ArcCompareContent>
+        </ArcComparisonContent>
+      </ArcComparisonOrbit>
+      <ArcComparisonOrbit>
+        <ArcComparisonBadge>03</ArcComparisonBadge>
+        <ArcComparisonHeading>Single Failure</ArcComparisonHeading>
+        <ArcComparisonContent>
           Unchecked memory leaks or crashes can bring down the entire system.
-        </ArcCompareContent>
-      </ArcCompareCallout>
-    </ArcCompareContents>
-  </ArcCompareLeft>
-
-  <ArcCompareRight color="#0284c7">
-    <ArcCompareTitle>Distributed<br />Microservices</ArcCompareTitle>
-    <ArcCompareContents>
-      <ArcCompareCallout>
-        <ArcCompareBadge>01</ArcCompareBadge>
-        <ArcCompareHeading>Bounded Context</ArcCompareHeading>
-        <ArcCompareContent>
+        </ArcComparisonContent>
+      </ArcComparisonOrbit>
+    </ArcComparisonContents>
+  </ArcComparisonLeft>
+
+  <ArcComparisonRight color="#0284c7">
+    <ArcComparisonTitle>Distributed<br />Microservices</ArcComparisonTitle>
+    <ArcComparisonContents>
+      <ArcComparisonOrbit>
+        <ArcComparisonBadge>01</ArcComparisonBadge>
+        <ArcComparisonHeading>Bounded Context</ArcComparisonHeading>
+        <ArcComparisonContent>
           Autonomous services communicate over defined asynchronous events.
-        </ArcCompareContent>
-      </ArcCompareCallout>
-      <ArcCompareCallout>
-        <ArcCompareBadge>02</ArcCompareBadge>
-        <ArcCompareHeading>Elastic Scale</ArcCompareHeading>
-        <ArcCompareContent>
+        </ArcComparisonContent>
+      </ArcComparisonOrbit>
+      <ArcComparisonOrbit>
+        <ArcComparisonBadge>02</ArcComparisonBadge>
+        <ArcComparisonHeading>Elastic Scale</ArcComparisonHeading>
+        <ArcComparisonContent>
           Horizontal autoscaling responds dynamically to spike traffic demand.
-        </ArcCompareContent>
-      </ArcCompareCallout>
-      <ArcCompareCallout>
-        <ArcCompareBadge>03</ArcCompareBadge>
-        <ArcCompareHeading>Isolated Faults</ArcCompareHeading>
-        <ArcCompareContent>
+        </ArcComparisonContent>
+      </ArcComparisonOrbit>
+      <ArcComparisonOrbit>
+        <ArcComparisonBadge>03</ArcComparisonBadge>
+        <ArcComparisonHeading>Isolated Faults</ArcComparisonHeading>
+        <ArcComparisonContent>
           Failures remain localized without cascading across service domains.
-        </ArcCompareContent>
-      </ArcCompareCallout>
-    </ArcCompareContents>
-  </ArcCompareRight>
-</ArcCompare>
+        </ArcComparisonContent>
+      </ArcComparisonOrbit>
+    </ArcComparisonContents>
+  </ArcComparisonRight>
+</ArcComparison>
 ```
 
-## Comparison table
+## Table comparison
 
-- Components: `ComparisonTable`, `ComparisonTableCols`, `ComparisonTableCol`, `ComparisonTableRows`, `ComparisonTableRow`, `ComparisonTableCell`
+- Components: `TableComparison`, `TableComparisonCols`, `TableComparisonCol`, `TableComparisonRows`, `TableComparisonRow`, `TableComparisonCell`
 
 ```vue
 <!-- Self-contained mockup default (5 columns x 6 rows) -->
-<ComparisonTable />
+<TableComparison />
 
 <!-- Custom compound comparison structure -->
-<ComparisonTable>
-  <ComparisonTableCols>
-    <ComparisonTableCol color="#ff0000">
+<TableComparison>
+  <TableComparisonCols>
+    <TableComparisonCol color="#ff0000">
       Column 1
-    </ComparisonTableCol>
-    <ComparisonTableCol color="#00ff00">
+    </TableComparisonCol>
+    <TableComparisonCol color="#00ff00">
       Column 2
-    </ComparisonTableCol>
-    <ComparisonTableCol color="#0000ff">
+    </TableComparisonCol>
+    <TableComparisonCol color="#0000ff">
       Column 3
-    </ComparisonTableCol>
-  </ComparisonTableCols>
-  <ComparisonTableRows>
-    <ComparisonTableRow title="Row 1">
-      <ComparisonTableCell>Row 1, Cell 1</ComparisonTableCell>
-      <ComparisonTableCell>Row 1, Cell 2</ComparisonTableCell>
-      <ComparisonTableCell>Row 1, Cell 3</ComparisonTableCell>
-    </ComparisonTableRow>
-    <ComparisonTableRow title="Row 2">
-      <ComparisonTableCell>Row 2, Cell 1</ComparisonTableCell>
-      <ComparisonTableCell>Row 2, Cell 2</ComparisonTableCell>
-      <ComparisonTableCell>Row 2, Cell 3</ComparisonTableCell>
-    </ComparisonTableRow>
-  </ComparisonTableRows>
-</ComparisonTable>
+    </TableComparisonCol>
+  </TableComparisonCols>
+  <TableComparisonRows>
+    <TableComparisonRow title="Row 1">
+      <TableComparisonCell>Row 1, Cell 1</TableComparisonCell>
+      <TableComparisonCell>Row 1, Cell 2</TableComparisonCell>
+      <TableComparisonCell>Row 1, Cell 3</TableComparisonCell>
+    </TableComparisonRow>
+    <TableComparisonRow title="Row 2">
+      <TableComparisonCell>Row 2, Cell 1</TableComparisonCell>
+      <TableComparisonCell>Row 2, Cell 2</TableComparisonCell>
+      <TableComparisonCell>Row 2, Cell 3</TableComparisonCell>
+    </TableComparisonRow>
+  </TableComparisonRows>
+</TableComparison>
+```
+
+## Circular pyramid
+
+- Components: `CircularPyramid`, `CircularPyramidStack`, `CircularPyramidStackTitle`, `CircularPyramidStackContent`
+
+```vue
+<CircularPyramid>
+  <CircularPyramidStack>
+    <CircularPyramidStackTitle>01 Strategy</CircularPyramidStackTitle>
+    <CircularPyramidStackContent>
+      Define clear technical north stars, design systems, and cross-team alignment.
+    </CircularPyramidStackContent>
+  </CircularPyramidStack>
+  <CircularPyramidStack>
+    <CircularPyramidStackTitle>02 Architecture</CircularPyramidStackTitle>
+    <CircularPyramidStackContent>
+      Establish domain boundaries, type safety contracts, and scalable infrastructure.
+    </CircularPyramidStackContent>
+  </CircularPyramidStack>
+  <CircularPyramidStack>
+    <CircularPyramidStackTitle>03 Implementation</CircularPyramidStackTitle>
+    <CircularPyramidStackContent>
+      Build high-performance components with smooth motion and responsive layout.
+    </CircularPyramidStackContent>
+  </CircularPyramidStack>
+  <CircularPyramidStack>
+    <CircularPyramidStackTitle>04 Verification</CircularPyramidStackTitle>
+    <CircularPyramidStackContent>
+      Validate behavior with rigorous unit suites, formatting, and live slide builds.
+    </CircularPyramidStackContent>
+  </CircularPyramidStack>
+</CircularPyramid>
+
+<!-- Self-contained mockup with 6 layers and custom theme color -->
+<CircularPyramid
+  :count="6"
+  :active-index="0"
+  color="#6366f1"
+/>
+```
+
+## Square pyramid
+
+- Components: `SquarePyramid`, `SquarePyramidStack`, `SquarePyramidStackTitle`, `SquarePyramidStackContent`
+
+```vue
+<SquarePyramid>
+  <SquarePyramidStack>
+    <SquarePyramidStackTitle>01 Strategy</SquarePyramidStackTitle>
+    <SquarePyramidStackContent>
+      Define clear technical north stars, design systems, and cross-team alignment.
+    </SquarePyramidStackContent>
+  </SquarePyramidStack>
+  <SquarePyramidStack>
+    <SquarePyramidStackTitle>02 Architecture</SquarePyramidStackTitle>
+    <SquarePyramidStackContent>
+      Establish domain boundaries, type safety contracts, and scalable infrastructure.
+    </SquarePyramidStackContent>
+  </SquarePyramidStack>
+  <SquarePyramidStack>
+    <SquarePyramidStackTitle>03 Implementation</SquarePyramidStackTitle>
+    <SquarePyramidStackContent>
+      Build high-performance components with smooth motion and responsive layout.
+    </SquarePyramidStackContent>
+  </SquarePyramidStack>
+  <SquarePyramidStack>
+    <SquarePyramidStackTitle>04 Verification</SquarePyramidStackTitle>
+    <SquarePyramidStackContent>
+      Validate behavior with rigorous unit suites, formatting, and live slide builds.
+    </SquarePyramidStackContent>
+  </SquarePyramidStack>
+</SquarePyramid>
+
+<!-- Self-contained mockup with 5 slabs and custom theme color -->
+<SquarePyramid
+  :count="5"
+  :active-index="0"
+  color="#6366f1"
+/>
 ```
 
 ## Preview

package/components/{chevron-card → card/chevron-card}/ChevronCard.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, Fragment, provide, useSlots, type VNode } from 'vue';
 
-import { CHEVRON_CARD_KEY } from '../../utils/chevronCard';
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+import { CHEVRON_CARD_KEY } from '../../../utils/chevronCard';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 import ChevronCardBadge from './ChevronCardBadge.vue';
 import ChevronCardContent from './ChevronCardContent.vue';
 import ChevronCardHeading from './ChevronCardHeading.vue';

package/components/{chevron-card → card/chevron-card}/ChevronCardBadge.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { CHEVRON_CARD_KEY } from '../../utils/chevronCard';
+import { CHEVRON_CARD_KEY } from '../../../utils/chevronCard';
 
 defineOptions({
   name: 'ChevronCardBadge',

package/components/{chevron-card → card/chevron-card}/ChevronCardContent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { CHEVRON_CARD_KEY } from '../../utils/chevronCard';
+import { CHEVRON_CARD_KEY } from '../../../utils/chevronCard';
 
 defineOptions({
   name: 'ChevronCardContent',

package/components/{chevron-card → card/chevron-card}/ChevronCardHeading.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { CHEVRON_CARD_KEY } from '../../utils/chevronCard';
+import { CHEVRON_CARD_KEY } from '../../../utils/chevronCard';
 
 defineOptions({
   name: 'ChevronCardHeading',

package/components/{horiz-card → card/horiz-card}/HorizCard.vue

@@ -13,8 +13,8 @@ import {
   createHorizCardPath,
   HORIZ_CARD_KEY,
   hexToRgba,
-} from '../../utils/horizCard';
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+} from '../../../utils/horizCard';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   name: 'HorizCard',

package/components/{horiz-card → card/horiz-card}/HorizCardBadge.vue

@@ -4,8 +4,8 @@ import { computed, inject } from 'vue';
 import {
   createHorizCardBadgePath,
   HORIZ_CARD_KEY,
-} from '../../utils/horizCard';
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+} from '../../../utils/horizCard';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,

package/components/{horiz-card → card/horiz-card}/HorizCardContent.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { HORIZ_CARD_KEY } from '../../utils/horizCard';
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+import { HORIZ_CARD_KEY } from '../../../utils/horizCard';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,

package/components/{horiz-card → card/horiz-card}/HorizCardHeading.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { HORIZ_CARD_KEY } from '../../utils/horizCard';
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+import { HORIZ_CARD_KEY } from '../../../utils/horizCard';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,

package/components/{horiz-card → card/horiz-card}/HorizCardIcon.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { HORIZ_CARD_KEY, hexToRgba } from '../../utils/horizCard';
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+import { HORIZ_CARD_KEY, hexToRgba } from '../../../utils/horizCard';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,

package/components/{vert-card → card/vert-card}/VertCard.vue

@@ -8,14 +8,14 @@ import {
   type VNode,
 } from 'vue';
 
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 import {
   createVertCardBottomBlobPath,
   createVertCardTopRightBlobPath,
   hexToRgba,
   type TVertCardBadgeVariant,
   VERT_CARD_KEY,
-} from '../../utils/vertCard';
+} from '../../../utils/vertCard';
 
 defineOptions({
   name: 'VertCard',

package/components/{vert-card → card/vert-card}/VertCardBadge.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
-import { createVertCardBadgePath, VERT_CARD_KEY } from '../../utils/vertCard';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+import {
+  createVertCardBadgePath,
+  VERT_CARD_KEY,
+} from '../../../utils/vertCard';
 
 defineOptions({
   inheritAttrs: false,

package/components/{vert-card → card/vert-card}/VertCardContent.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
-import { VERT_CARD_KEY } from '../../utils/vertCard';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+import { VERT_CARD_KEY } from '../../../utils/vertCard';
 
 defineOptions({
   inheritAttrs: false,

package/components/{vert-card → card/vert-card}/VertCardHeading.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
-import { VERT_CARD_KEY } from '../../utils/vertCard';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+import { VERT_CARD_KEY } from '../../../utils/vertCard';
 
 defineOptions({
   inheritAttrs: false,

package/components/{vert-card → card/vert-card}/VertCardIcon.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
-import { hexToRgba, VERT_CARD_KEY } from '../../utils/vertCard';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+import { hexToRgba, VERT_CARD_KEY } from '../../../utils/vertCard';
 
 defineOptions({
   inheritAttrs: false,

package/components/{vert-card → card/vert-card}/VertCardTitle.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
-import { VERT_CARD_KEY } from '../../utils/vertCard';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+import { VERT_CARD_KEY } from '../../../utils/vertCard';
 
 defineOptions({
   inheritAttrs: false,