@alphacifer/slidev-addon-theme 0.0.10 → 0.0.11

package/components/facets/triad/gear-triad/GearTriadHeading.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { GEAR_TRIAD_CALLOUT_KEY } from '../../../../utils/gearTriad';
+import { GEAR_TRIAD_CALLOUT_KEY } from '../../../../utils/facets/triad/gear-triad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
 
 defineOptions({
+  inheritAttrs: false,
   name: 'GearTriadHeading',
 });
 
@@ -18,21 +20,25 @@ const props = withDefaults(defineProps<IGearTriadHeadingProps>(), {
 const calloutContext = inject(GEAR_TRIAD_CALLOUT_KEY, undefined);
 
 const headingColor = computed(() => {
-  return props.color ?? calloutContext?.item.value.titleColor ?? '#0f172a';
+  return (
+    props.color ??
+    calloutContext?.item.value.color ??
+    'var(--alpha-gear-triad-heading)'
+  );
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-gear-triad-heading mb-1.5 font-sans font-bold leading-snug tracking-tight select-none',
+);
 </script>
 
 <template>
-  <div
-    class="alpha-gear-triad-heading font-bold text-[1.15rem] tracking-tight leading-snug mb-1.5 select-none"
-    :style="{
-      color: headingColor,
-      fontFamily:
-        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-    }"
+  <h4
+    v-if="$slots.default"
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="{ color: headingColor }"
   >
-    <slot>
-      {{ calloutContext?.item.value.title }}
-    </slot>
-  </div>
+    <slot>{{ '' }}</slot>
+  </h4>
 </template>

package/components/facets/triad/gear-triad/GearTriadIcon.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
 
-import type { TGearTriadIcon } from '../../../../utils/gearTriad';
+import type { TGearTriadIcon } from '../../../../utils/facets/triad/gear-triad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
 
 defineOptions({
+  inheritAttrs: false,
   name: 'GearTriadIcon',
 });
 
@@ -16,7 +18,7 @@ export interface IGearTriadIconProps {
 
 const props = withDefaults(defineProps<IGearTriadIconProps>(), {
   size: 32,
-  color: '#0f172a',
+  color: undefined,
   strokeWidth: 2,
   icon: undefined,
 });
@@ -27,6 +29,7 @@ const shouldRender = computed((): boolean => {
   if (props.icon === false) {
     return false;
   }
+
   return Boolean(props.icon || slots.default);
 });
 
@@ -37,16 +40,21 @@ const isStringIcon = computed((): boolean => {
 const isComponentIcon = computed((): boolean => {
   return typeof props.icon === 'object' && props.icon !== null;
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-gear-triad-icon flex items-center justify-center text-(--alpha-gear-triad-icon) pointer-events-none select-none',
+);
 </script>
 
 <template>
   <div
     v-if="shouldRender"
-    class="alpha-gear-triad-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`,
+      ...(props.color ? { '--alpha-gear-triad-icon': props.color } : {}),
     }"
   >
     <slot>
@@ -54,17 +62,15 @@ const isComponentIcon = computed((): boolean => {
       <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-file-text) -->
       <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`,
@@ -73,6 +79,7 @@ const isComponentIcon = computed((): boolean => {
 
       <!-- 01 Document with folded corner and lines (Option 1) -->
       <svg
+        aria-hidden="true"
         v-else-if="
           props.icon === 'document' ||
           props.icon === 'file' ||
@@ -95,6 +102,7 @@ const isComponentIcon = computed((): boolean => {
 
       <!-- 02 Shield with star (Option 2) -->
       <svg
+        aria-hidden="true"
         v-else-if="props.icon === 'shield' || props.icon === 'shield-star'"
         viewBox="0 0 24 24"
         fill="none"
@@ -113,6 +121,7 @@ const isComponentIcon = computed((): boolean => {
 
       <!-- 03 Archive box with files poking out (Option 3) -->
       <svg
+        aria-hidden="true"
         v-else-if="
           props.icon === 'archive' ||
           props.icon === 'box' ||
@@ -133,11 +142,15 @@ const isComponentIcon = computed((): boolean => {
         <!-- Center handle slot -->
         <line x1="10" y1="15" x2="14" y2="15" />
         <!-- Folders / papers peeking out top -->
-        <path d="M7 7V4a1 1 0 0 1 1-1h4l2 2h3a1 1 0 0 1 1 1v1" stroke-width="1.5" />
+        <path
+          d="M7 7V4a1 1 0 0 1 1-1h4l2 2h3a1 1 0 0 1 1 1v1"
+          stroke-width="1.5"
+        />
       </svg>
 
       <!-- 04 Center Gear with 6 teeth and 3-spoke inner steering (Center Hub) -->
       <svg
+        aria-hidden="true"
         v-else-if="props.icon === 'gear' || props.icon === 'settings' || props.icon === 'cog'"
         viewBox="0 0 24 24"
         fill="none"

package/components/facets/triad/gear-triad/style.css

@@ -0,0 +1,26 @@
+/* Color defaults shared by this component family. */
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-gear-triad-content: var(--alpha-foreground-primary, #64748b);
+    --alpha-gear-triad-center-bg-end: #f1f5f9;
+    --alpha-gear-triad-center-bg-start: #ffffff;
+    --alpha-gear-triad-center-icon: #0f172a;
+    --alpha-gear-triad-center-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.22), 0 2px 6px -1px rgba(0, 0, 0, 0.12);
+    --alpha-gear-triad-detail: var(--alpha-foreground-primary, #475569);
+    --alpha-gear-triad-detail-number: #334155;
+    --alpha-gear-triad-details-content: var(--alpha-foreground-primary, #64748b);
+    --alpha-gear-triad-details-heading: var(--alpha-foreground-primary, #0f172a);
+    --alpha-gear-triad-heading: var(--alpha-foreground-primary, #0f172a);
+    --alpha-gear-triad-icon: #0f172a;
+    --alpha-gear-triad-item-1-color: #1fb5b5;
+    --alpha-gear-triad-item-1-depth: #126e7a;
+    --alpha-gear-triad-item-2-color: #f38942;
+    --alpha-gear-triad-item-2-depth: #aa521d;
+    --alpha-gear-triad-item-3-color: #f05367;
+    --alpha-gear-triad-item-3-depth: #a82c3c;
+    --alpha-gear-triad-muted-icon: #ffffff;
+    --alpha-gear-triad-muted-sector: #d5d8dc;
+    --alpha-gear-triad-shadow: #0f172a;
+    --alpha-gear-triad-valley: #11455c;
+  }
+}

package/components/facets/triad/{hex-triad/HexTriad.vue → hexagon-triad/HexagonTriad.vue}

@@ -9,23 +9,19 @@ import {
 } from 'vue';
 
 import {
-  calculateHexTriadCoordinates,
+  calculateHexagonTriadCoordinates,
   createRoundedHexagonPath,
   HEX_TRIAD_ROOT_KEY,
-  type IHexTriadItem,
-  resolveHexTriadItems,
-} from '../../../../utils/hexTriad';
+  resolveHexagonTriadItems,
+} from '../../../../utils/facets/triad/hexagon-triad';
 import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,
 });
 
-export interface IHexTriadProps {
-  readonly title?: string;
-  readonly subtitle?: string;
+export interface IHexagonTriadProps {
   readonly animation?: boolean;
-  readonly items?: readonly IHexTriadItem[];
   /**
    * Additional delay (ms) before animation starts.
    * Defaults to 600ms inside `shifting-intro` layout, 0ms otherwise.
@@ -38,12 +34,9 @@ export interface IHexTriadProps {
   readonly active?: boolean;
 }
 
-const props = withDefaults(defineProps<IHexTriadProps>(), {
+const props = withDefaults(defineProps<IHexagonTriadProps>(), {
   animation: true,
-  title: undefined,
-  items: undefined,
   active: undefined,
-  subtitle: undefined,
   startDelay: undefined,
 });
 
@@ -85,7 +78,7 @@ const resolvedStartDelay = computed(() => {
   return 0;
 });
 
-const resolvedItems = computed(() => resolveHexTriadItems(props.items));
+const resolvedItems = computed(() => resolveHexagonTriadItems());
 
 let calloutCounter = 0;
 const customBadgeTexts = ref<(string | number)[]>([]);
@@ -122,7 +115,7 @@ const item3 = computed(() => {
 });
 
 // Central diagram coordinates
-const coords = calculateHexTriadCoordinates();
+const coords = calculateHexagonTriadCoordinates();
 const {
   hex1,
   hex2,
@@ -226,7 +219,7 @@ const hex3TopPath = createRoundedHexagonPath(
 );
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-hex-triad w-full flex flex-col items-center justify-center select-none font-sans',
+  'alpha-hexagon-triad w-full flex flex-col items-center justify-center select-none font-sans',
 );
 </script>
 
@@ -236,46 +229,75 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     :class="className()"
     :style="{ '--hex-start-delay': `${resolvedStartDelay}ms` }"
   >
-    <header v-if="title || $slots.title" class="alpha-hex-triad__header mb-4 text-center">
-      <slot name="title">
-        <h2 class="alpha-hex-triad__title text-2xl font-bold font-sans tracking-tight">
-          {{ title }}
-        </h2>
-      </slot>
-      <p v-if="subtitle || $slots.subtitle" class="alpha-hex-triad__subtitle text-sm font-sans">
-        <slot name="subtitle">{{ subtitle }}</slot>
-      </p>
-    </header>
-    <div class="alpha-hex-triad__stage relative w-full max-w-5xl h-[440px] flex items-center justify-center">
+    <div
+      class="alpha-hexagon-triad__stage relative w-full max-w-5xl h-110 flex items-center justify-center"
+    >
       <!-- Center Column: Overlapping 3D Rounded Hexagon SVG -->
-      <div class="alpha-hex-triad__center relative flex items-center justify-center">
+      <div
+        class="alpha-hexagon-triad__center relative flex items-center justify-center"
+      >
         <svg
-          class="alpha-hex-triad__svg w-[450px] h-[420px] overflow-visible"
+          aria-hidden="true"
+          class="alpha-hexagon-triad__svg w-112.5 h-105 overflow-visible"
           viewBox="0 0 540 440"
         >
           <defs>
             <!-- Drop shadow for badges -->
-            <filter id="hex-badge-shadow" x="-30%" y="-30%" width="160%" height="160%">
-              <feDropShadow dx="0" dy="3" stdDeviation="4" flood-opacity="0.35" />
+            <filter
+              id="hex-badge-shadow"
+              x="-30%"
+              y="-30%"
+              width="160%"
+              height="160%"
+            >
+              <feDropShadow
+                dx="0"
+                dy="3"
+                stdDeviation="4"
+                flood-opacity="0.35"
+              />
             </filter>
             <!-- 3D extrusion shadow for base layer -->
-            <filter id="hex-triad-depth" x="-20%" y="-20%" width="140%" height="140%">
-              <feDropShadow dx="0" dy="6" stdDeviation="6" flood-opacity="0.3" />
+            <filter
+              id="hexagon-triad-depth"
+              x="-20%"
+              y="-20%"
+              width="140%"
+              height="140%"
+            >
+              <feDropShadow
+                dx="0"
+                dy="6"
+                stdDeviation="6"
+                flood-opacity="0.3"
+              />
             </filter>
             <!-- Gradients for Hex 01 -->
             <linearGradient id="grad-hex-1" x1="0%" y1="0%" x2="0%" y2="100%">
               <stop offset="0%" :stop-color="item1.color" stop-opacity="0.95" />
-              <stop offset="100%" :stop-color="item1.depthColor" stop-opacity="0.9" />
+              <stop
+                offset="100%"
+                :stop-color="item1.depthColor"
+                stop-opacity="0.9"
+              />
             </linearGradient>
             <!-- Gradients for Hex 02 -->
             <linearGradient id="grad-hex-2" x1="0%" y1="0%" x2="100%" y2="100%">
               <stop offset="0%" :stop-color="item2.color" stop-opacity="0.95" />
-              <stop offset="100%" :stop-color="item2.depthColor" stop-opacity="0.9" />
+              <stop
+                offset="100%"
+                :stop-color="item2.depthColor"
+                stop-opacity="0.9"
+              />
             </linearGradient>
             <!-- Gradients for Hex 03 -->
             <linearGradient id="grad-hex-3" x1="0%" y1="0%" x2="100%" y2="100%">
               <stop offset="0%" :stop-color="item3.color" stop-opacity="0.95" />
-              <stop offset="100%" :stop-color="item3.depthColor" stop-opacity="0.9" />
+              <stop
+                offset="100%"
+                :stop-color="item3.depthColor"
+                stop-opacity="0.9"
+              />
             </linearGradient>
           </defs>
           <!-- LAYER 1: Background Pastel Offset Hexagons (Animated: slides out from behind solid hexagon to offset position) -->
@@ -283,7 +305,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
             class="alpha-hex-layer1 alpha-hex-layer1--3"
             :class="{ 'alpha-hex-layer1--animated': isAnimated }"
           >
-            <HexTriadLayer
+            <HexagonTriadLayer
               :d="hex3BgPath"
               :fill="item3.lightColor ?? item3.color"
               :opacity="0.38"
@@ -293,7 +315,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
             class="alpha-hex-layer1 alpha-hex-layer1--2"
             :class="{ 'alpha-hex-layer1--animated': isAnimated }"
           >
-            <HexTriadLayer
+            <HexagonTriadLayer
               :d="hex2BgPath"
               :fill="item2.lightColor ?? item2.color"
               :opacity="0.38"
@@ -303,62 +325,62 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
             class="alpha-hex-layer1 alpha-hex-layer1--1"
             :class="{ 'alpha-hex-layer1--animated': isAnimated }"
           >
-            <HexTriadLayer
+            <HexagonTriadLayer
               :d="hex1BgPath"
               :fill="item1.lightColor ?? item1.color"
               :opacity="0.38"
             />
           </g>
           <!-- LAYER 2: Middle 3D Depth Base Hexagons (3 hexa blocks) -->
-          <HexTriadLayer
+          <HexagonTriadLayer
             :d="hex3BasePath"
             :fill="item3.depthColor"
-            filter="url(#hex-triad-depth)"
+            filter="url(#hexagon-triad-depth)"
             :opacity="0.85"
           />
-          <HexTriadLayer
+          <HexagonTriadLayer
             :d="hex2BasePath"
             :fill="item2.depthColor"
-            filter="url(#hex-triad-depth)"
+            filter="url(#hexagon-triad-depth)"
             :opacity="0.85"
           />
-          <HexTriadLayer
+          <HexagonTriadLayer
             :d="hex1BasePath"
             :fill="item1.depthColor"
-            filter="url(#hex-triad-depth)"
+            filter="url(#hexagon-triad-depth)"
             :opacity="0.85"
           />
           <!-- LAYER 3: Foreground Hexagons with Gradients (3 hexa blocks) -->
-          <HexTriadLayer
+          <HexagonTriadLayer
             :d="hex3TopPath"
             fill="url(#grad-hex-3)"
             :opacity="0.9"
           />
-          <HexTriadLayer
+          <HexagonTriadLayer
             :d="hex2TopPath"
             fill="url(#grad-hex-2)"
             :opacity="0.9"
           />
-          <HexTriadLayer
+          <HexagonTriadLayer
             :d="hex1TopPath"
             fill="url(#grad-hex-1)"
             :opacity="0.9"
           />
           <!-- LAYER 4: White Interconnecting Ring (Circumcircle) -->
           <circle
-            class="alpha-hex-triad__circumcircle"
+            class="alpha-hexagon-triad__circumcircle"
             :cx="centerX"
             :cy="centerY"
             :r="triadRadius"
             fill="none"
-            stroke="#ffffff"
+            stroke="var(--alpha-hexagon-triad-connector-stroke)"
             stroke-width="2.5"
             stroke-linecap="round"
             :style="{ opacity: 0.95 }"
           />
           <!-- LAYER 5: Center Circular Badges (Centered Directly on the White Circle) -->
           <!-- Badge 03 (Bottom-Left) -->
-          <HexTriadCenterBadge
+          <HexagonTriadCenterBadge
             :x="badge3X"
             :y="badge3Y"
             :radius="badgeRadius"
@@ -366,7 +388,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
             :text="customBadgeTexts[2] || item3.id"
           />
           <!-- Badge 02 (Bottom-Right) -->
-          <HexTriadCenterBadge
+          <HexagonTriadCenterBadge
             :x="badge2X"
             :y="badge2Y"
             :radius="badgeRadius"
@@ -374,7 +396,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
             :text="customBadgeTexts[1] || item2.id"
           />
           <!-- Badge 01 (Top) -->
-          <HexTriadCenterBadge
+          <HexagonTriadCenterBadge
             :x="badge1X"
             :y="badge1Y"
             :radius="badgeRadius"
@@ -383,14 +405,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
           />
         </svg>
       </div>
-      <!-- If default slot provided, render user's <HexTriadCallout> components -->
-      <slot v-if="$slots.default" />
-      <!-- Fallback: render 3 default callouts if no slots provided -->
-      <template v-else>
-        <HexTriadCallout />
-        <HexTriadCallout />
-        <HexTriadCallout />
-      </template>
+      <slot />
     </div>
   </div>
 </template>
@@ -398,15 +413,18 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
 <style scoped>
 /* Layer 1 (Pastel Hexagons) slides out with overlapping cascading stagger */
 .alpha-hex-layer1--1.alpha-hex-layer1--animated {
-  animation: hex-layer1-slide-1 500ms cubic-bezier(0.25, 1, 0.5, 1) calc(var(--hex-start-delay, 0ms) + 100ms) both;
+  animation: hex-layer1-slide-1 500ms cubic-bezier(0.25, 1, 0.5, 1)
+    calc(var(--hex-start-delay, 0ms) + 100ms) both;
 }
 
 .alpha-hex-layer1--2.alpha-hex-layer1--animated {
-  animation: hex-layer1-slide-2 500ms cubic-bezier(0.25, 1, 0.5, 1) calc(var(--hex-start-delay, 0ms) + 300ms) both;
+  animation: hex-layer1-slide-2 500ms cubic-bezier(0.25, 1, 0.5, 1)
+    calc(var(--hex-start-delay, 0ms) + 300ms) both;
 }
 
 .alpha-hex-layer1--3.alpha-hex-layer1--animated {
-  animation: hex-layer1-slide-3 500ms cubic-bezier(0.25, 1, 0.5, 1) calc(var(--hex-start-delay, 0ms) + 500ms) both;
+  animation: hex-layer1-slide-3 500ms cubic-bezier(0.25, 1, 0.5, 1)
+    calc(var(--hex-start-delay, 0ms) + 500ms) both;
 }
 
 @keyframes hex-layer1-slide-1 {

package/components/facets/triad/{hex-triad/HexTriadBadge.vue → hexagon-triad/HexagonTriadBadge.vue}

@@ -4,19 +4,21 @@ import { computed, inject, useSlots, watchEffect } from 'vue';
 import {
   createRoundedHexagonPath,
   HEX_TRIAD_CALLOUT_KEY,
-} from '../../../../utils/hexTriad';
+} from '../../../../utils/facets/triad/hexagon-triad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
 
 defineOptions({
-  name: 'HexTriadBadge',
+  inheritAttrs: false,
+  name: 'HexagonTriadBadge',
 });
 
-export interface IHexTriadBadgeProps {
+export interface IHexagonTriadBadgeProps {
   readonly id?: string | number;
   readonly color?: string;
   readonly lightColor?: string;
 }
 
-const props = withDefaults(defineProps<IHexTriadBadgeProps>(), {
+const props = withDefaults(defineProps<IHexagonTriadBadgeProps>(), {
   id: undefined,
   color: undefined,
   lightColor: undefined,
@@ -32,7 +34,11 @@ const slots = useSlots();
 const miniHexPath = createRoundedHexagonPath(18, 18, 17, 4.5);
 
 const badgeColor = computed(() => {
-  return props.color ?? calloutContext?.item.value.color ?? '#e11d48';
+  return (
+    props.color ??
+    calloutContext?.item.value.color ??
+    'var(--alpha-hexagon-triad-badge-bg)'
+  );
 });
 
 const badgeLightColor = computed(() => {
@@ -40,7 +46,7 @@ const badgeLightColor = computed(() => {
     props.lightColor ??
     calloutContext?.item.value.lightColor ??
     calloutContext?.item.value.color ??
-    '#fb7185'
+    'var(--alpha-hexagon-triad-badge-light)'
   );
 });
 
@@ -81,26 +87,46 @@ watchEffect(() => {
     calloutContext.setBadgeText(badgeText.value);
   }
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-hexagon-triad-badge w-10 h-10 drop-shadow shrink-0',
+);
 </script>
 
 <template>
-  <svg class="alpha-hex-triad-badge w-10 h-10 drop-shadow flex-shrink-0" viewBox="0 0 36 36">
-    <path class="alpha-hex-triad-badge__bg" :d="miniHexPath" :fill="badgeLightColor" :style="{ opacity: 0.45 }" />
+  <svg
+    aria-hidden="true"
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    viewBox="0 0 36 36"
+  >
     <path
-      class="alpha-hex-triad-badge__border"
+      class="alpha-hexagon-triad-badge__bg"
+      :d="miniHexPath"
+      :fill="badgeLightColor"
+      :style="{ opacity: 0.45 }"
+    />
+    <path
+      class="alpha-hexagon-triad-badge__border"
       :d="miniHexPath"
       fill="none"
       :stroke="badgeLightColor"
       stroke-width="1"
       :style="{ opacity: 0.8 }"
     />
-    <circle class="alpha-hex-triad-badge__circle" cx="18" cy="18" r="11" :fill="badgeColor" />
+    <circle
+      class="alpha-hexagon-triad-badge__circle"
+      cx="18"
+      cy="18"
+      r="11"
+      :fill="badgeColor"
+    />
     <text
-      class="alpha-hex-triad-badge__text font-black text-[10px] font-sans select-none"
+      class="alpha-hexagon-triad-badge__text font-black text-[10px] font-sans select-none"
       x="18"
       y="21.5"
       text-anchor="middle"
-      fill="#ffffff"
+      fill="var(--alpha-hexagon-triad-badge)"
     >
       <tspan>
         <slot>{{ fallbackId }}</slot>