@anubis609/astroanimate-core 0.1.2

package/dist/components/Dock/DockItem.astro

@@ -0,0 +1,135 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** Label shown in tooltip on hover */
+  label?: string;
+  /** Whether this item is currently active/running */
+  active?: boolean;
+  /** Custom class names */
+  class?: string;
+}
+
+const { label, active = false, class: className = "", ...rest } = Astro.props;
+---
+
+<div class:list={["dock-item", { "is-active": active }, className]} {...rest}>
+  {label && <span class="dock-label">{label}</span>}
+  <slot />
+</div>
+
+<style>
+  .dock-item {
+    position: relative;
+    width: var(--item-size, 3.2rem);
+    height: var(--item-size, 3.2rem);
+    border-radius: 0.75rem;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transform: scale(var(--dock-item-scale, 1))
+      translateY(var(--dock-item-y, 0px));
+    margin: 0 var(--dock-item-margin, 4px);
+    transition:
+      transform 0.2s ease-out,
+      margin 0.2s ease-out;
+    transform-origin: var(--dock-origin, bottom center);
+    will-change: transform, margin;
+    flex-shrink: 0;
+    overflow: visible;
+    transform-style: preserve-3d;
+  }
+
+  .dock-item :global(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+    transition: filter 0.2s ease;
+    image-rendering: -webkit-optimize-contrast;
+    backface-visibility: hidden;
+    transform: translateZ(0);
+  }
+
+  .dock-item:hover :global(img),
+  .dock-item.is-active :global(img) {
+    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
+  }
+
+  /* Running indicator dot */
+  .dock-item.is-active::after {
+    content: "";
+    position: absolute;
+    bottom: -8px;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.6);
+  }
+
+  .dock-label {
+    position: absolute;
+    bottom: var(--tooltip-bottom, calc(100% + 0.75rem));
+    top: var(--tooltip-top, auto);
+    left: var(--tooltip-left, 50%);
+    right: var(--tooltip-right, auto);
+    transform: var(--tooltip-transform, translateX(-50%) translateY(4px))
+      scale(var(--dock-label-scale, 1));
+    transform-origin: inherit;
+    background: rgba(0, 0, 0, 0.85);
+    color: white;
+    padding: 0.4rem 0.9rem;
+    border-radius: 0.4rem;
+    font-size: 0.8rem;
+    font-weight: 500;
+    font-family:
+      system-ui,
+      -apple-system,
+      sans-serif;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    white-space: nowrap;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+    z-index: 100;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: geometricPrecision;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    will-change: opacity, transform;
+  }
+
+  .dock-label::after {
+    content: "";
+    position: absolute;
+    top: var(--tooltip-arrow-top, 100%);
+    bottom: var(--tooltip-arrow-bottom, auto);
+    left: var(--tooltip-arrow-left, 50%);
+    right: var(--tooltip-arrow-right, auto);
+    transform: var(--tooltip-arrow-transform, translateX(-50%));
+    border: 5px solid transparent;
+    border-color: var(--tooltip-arrow-border-color, rgba(0, 0, 0, 0.85) transparent transparent transparent);
+  }
+
+  .dock-item:hover .dock-label {
+    opacity: 1;
+    transform: var(--tooltip-transform-hover, translateX(-50%) translateY(0)) scale(var(--dock-label-scale, 1));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dock-item {
+      transition: none !important;
+      transform: none !important;
+    }
+    .dock-item :global(img) {
+      transition: none !important;
+    }
+    .dock-label {
+      transition: none !important;
+      transform: translateX(-50%) translateY(0) !important;
+    }
+  }
+</style>

package/dist/components/Dropdown/Dropdown.astro

@@ -0,0 +1,264 @@
+---
+export type DropdownItem = {
+  label: string;
+  icon?: string;
+  href?: string;
+  onClick?: string;
+};
+
+interface Props {
+  /** Button text label */
+  label: string;
+  /** Menu items array */
+  items: (string | DropdownItem)[];
+  /** Enable animations */
+  enhance?: boolean;
+  /** Open trigger type */
+  trigger?: 'click' | 'hover';
+  /** Hover close delay in ms */
+  hoverDelay?: number;
+  /** Callback when item selected - pass index */
+  onSelect?: (index: number) => void;
+}
+
+const { 
+  label, 
+  items = [], 
+  enhance = false, 
+  trigger = 'click', 
+  hoverDelay = 120 
+} = Astro.props;
+---
+
+<style>
+  /* ✅ CRITERION 1: Zero-JS baseline — content is present in HTML, trigger does nothing without JS */
+  .dropdown-root {
+    position: relative;
+    display: inline-block;
+  }
+
+  /* Trigger button reset */
+  .dropdown-trigger-wrap {
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  /* ✅ CRITERION 1: Menu hidden by default (CSS-only fallback = menu not shown without JS) */
+  .menu-content {
+    display: none;
+    position: absolute;
+    z-index: 50;
+    min-width: 200px;
+    top: calc(100% + 6px);
+    left: 0;
+    background: #1a1a1a;
+    border: 1px solid #333;
+    border-radius: 10px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+  }
+
+  /* ✅ CRITERION 7: JS only toggles data-state — all animation is pure CSS */
+  [data-ready="true"] .menu-content {
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-6px) scale(0.97);
+    transform-origin: top left;
+    transition:
+      opacity 0.18s ease,
+      transform 0.18s ease;
+  }
+
+  [data-ready="true"][data-state="open"] .menu-content {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0) scale(1);
+  }
+
+  /* ─── Hover mode: CSS-only zero-JS baseline ──────────────────────────────
+     When trigger=hover and no JS, show menu on native :hover so the
+     component still functions (no JS needed for the baseline experience).   */
+  [data-trigger="hover"] .menu-content {
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* Bridge the gap to prevent hover loss when moving cursor to menu */
+  [data-trigger="hover"]::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: 10px;
+    background: transparent;
+  }
+
+  /* CSS-only hover show (no JS) */
+  [data-trigger="hover"]:hover .menu-content {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* When JS is ready, hand full control to data-state (override :hover) */
+  [data-trigger="hover"][data-ready="true"] .menu-content {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-6px) scale(0.97);
+    transform-origin: top left;
+    transition:
+      opacity 0.18s ease,
+      transform 0.18s ease;
+  }
+
+  [data-trigger="hover"][data-ready="true"][data-state="open"] .menu-content {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0) scale(1);
+  }
+
+  /* Default trigger button styles */
+  .dropdown-trigger {
+    display: inline-block;
+    padding: 0.8rem 1rem;
+    background: #333;
+    color: white;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 0.9rem;
+    transition: background 0.15s ease;
+  }
+
+  .dropdown-trigger:hover {
+    background: #444;
+  }
+
+  .dropdown-trigger-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+
+  .dropdown-chevron {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+  }
+
+  [data-state="open"] .dropdown-chevron {
+    transform: rotate(180deg);
+  }
+
+  /* Menu item styles */
+  .menu-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem 1rem;
+    color: white;
+    text-decoration: none;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 0.9rem;
+    transition: background 0.15s ease;
+  }
+
+  .menu-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.15rem;
+    height: 1.15rem;
+    flex-shrink: 0;
+  }
+
+  .menu-item-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .menu-item:hover {
+    background: #333;
+  }
+
+  .menu-item:first-child {
+    margin-top: 0.5rem;
+  }
+
+  .menu-item:last-child {
+    margin-bottom: 0.5rem;
+  }
+
+  /* ✅ CRITERION 6: Reduced motion — kill all transitions */
+  @media (prefers-reduced-motion: reduce) {
+    [data-ready="true"] .menu-content {
+      transition: none !important;
+      transform: none !important;
+    }
+  }
+</style>
+
+<div
+  class="dropdown-root"
+  data-dropdown
+  data-enhance={enhance ? "true" : "false"}
+  data-trigger={trigger}
+  data-hover-delay={hoverDelay}
+>
+  <button
+    class="dropdown-trigger"
+    data-dropdown-trigger
+    type="button"
+    aria-haspopup="true"
+    aria-expanded="false"
+  >
+    <span class="dropdown-trigger-content">
+      {label}
+      <svg class="dropdown-chevron" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
+    </span>
+  </button>
+
+  <div
+    class="menu-content"
+    data-dropdown-content
+    role="menu"
+    aria-hidden="true"
+  >
+    {items.map((item, index) => {
+      const isObject = typeof item === 'object';
+      const itemLabel = isObject ? item.label : item;
+      const itemIcon = isObject ? item.icon : undefined;
+      const itemHref = isObject ? item.href : undefined;
+      const itemOnClick = isObject ? item.onClick : undefined;
+      
+      const Tag = itemHref ? 'a' : 'div';
+      
+      return (
+        <Tag class="menu-item" data-index={index} role="menuitem" href={itemHref} onclick={itemOnClick}>
+          {itemIcon && <span class="menu-item-icon" set:html={itemIcon} />}
+          <span>{itemLabel}</span>
+        </Tag>
+      );
+    })}
+  </div>
+</div>
+
+{enhance && (
+  <script>
+    import { enhanceDropdown } from "../../internal/dropdown";
+
+    // ✅ CRITERION 6: PRIMARY reduced motion guard lives here in .astro script block
+    if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      document.querySelectorAll<HTMLElement>('[data-dropdown][data-enhance="true"]').forEach((el) => {
+        enhanceDropdown(el);
+      });
+    }
+  </script>
+)}