@birdapi/velinstyle 0.6.1 → 0.8.0

package/src/base/root.css

@@ -1,4 +1,4 @@
-/* VelinStyle -- Layer order declaration
-   This MUST be the first file imported.
-   Later layers always override earlier layers -- no specificity wars. */
-@layer tokens, reset, base, a11y, layout, components, utilities, themes;
+/* VelinStyle -- Layer order declaration
+   This MUST be the first file imported.
+   Later layers always override earlier layers -- no specificity wars. */
+@layer tokens, reset, base, a11y, layout, components, utilities, security, themes;

package/src/components/nav.css

@@ -1,151 +1,152 @@
-@layer components {
-  .velin-nav {
-    display: flex;
-    align-items: center;
-    gap: var(--velin-space-2);
-    padding-block: var(--velin-space-3);
-    padding-inline: var(--velin-space-4);
-    background-color: var(--velin-color-surface-bright);
-    border-block-end: 1px solid var(--velin-color-border);
-  }
-
-  .velin-nav__brand {
-    font-size: var(--velin-text-lg);
-    font-weight: var(--velin-weight-bold);
-    color: var(--velin-color-text);
-    text-decoration: none;
-    margin-inline-end: auto;
-  }
-
-  .velin-nav__list {
-    display: flex;
-    align-items: center;
-    gap: var(--velin-space-1);
-    list-style: none;
-  }
-
-  .velin-nav__link {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--velin-space-1);
-    min-block-size: 2.75rem; /* 44px touch target */
-    padding-block: var(--velin-space-2);
-    padding-inline: var(--velin-space-3);
-    font-size: var(--velin-text-base);
-    font-weight: var(--velin-weight-medium);
-    color: var(--velin-color-text-muted);
-    text-decoration: none;
-    border-radius: var(--velin-radius-md);
-    transition: var(--velin-transition-colors);
-  }
-
-  .velin-nav__link:hover {
-    color: var(--velin-color-text);
-    background-color: var(--velin-color-surface-dim);
-  }
-
-  .velin-nav__link[aria-current="page"],
-  .velin-nav__link--active {
-    color: var(--velin-color-primary);
-    font-weight: var(--velin-weight-semibold);
-  }
-
-  /* Toggle button for mobile */
-  .velin-nav__toggle {
-    display: none;
-    min-block-size: 2.75rem;
-    min-inline-size: 2.75rem;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    color: var(--velin-color-text);
-    cursor: pointer;
-    border-radius: var(--velin-radius-md);
-  }
-
-  .velin-nav__toggle:hover {
-    background-color: var(--velin-color-surface-dim);
-  }
-
-  /* Mobile: stack nav vertically */
-  @media (max-width: 47.999rem) {
-    .velin-nav {
-      flex-wrap: wrap;
-    }
-
-    .velin-nav__toggle {
-      display: inline-flex;
-    }
-
-    .velin-nav__list {
-      flex-direction: column;
-      align-items: stretch;
-      inline-size: 100%;
-      display: none;
-    }
-
-    .velin-nav__list[data-velin-open] {
-      display: flex;
-    }
-
-    .velin-nav__link {
-      inline-size: 100%;
-    }
-  }
-
-  /* Vertical nav variant */
-  .velin-nav--vertical {
-    flex-direction: column;
-    align-items: stretch;
-    border-block-end: none;
-    border-inline-end: 1px solid var(--velin-color-border);
-  }
-
-  .velin-nav--vertical .velin-nav__brand {
-    margin-inline-end: 0;
-    margin-block-end: var(--velin-space-4);
-  }
-
-  .velin-nav--vertical .velin-nav__list {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  /* Mega menu */
-  .velin-nav__mega {
-    position: absolute;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    inset-block-start: 100%;
-    z-index: var(--velin-z-dropdown);
-    background: var(--velin-color-surface-bright);
-    border: 1px solid var(--velin-color-border);
-    border-radius: var(--velin-radius-lg);
-    box-shadow: var(--velin-shadow-lg);
-    padding: var(--velin-space-6);
-    display: none;
-  }
-
-  .velin-nav__item:hover > .velin-nav__mega,
-  .velin-nav__item:focus-within > .velin-nav__mega {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-    gap: var(--velin-space-6);
-  }
-
-  .velin-nav__mega-section {
-    display: flex;
-    flex-direction: column;
-    gap: var(--velin-space-2);
-  }
-
-  .velin-nav__mega-title {
-    font-size: var(--velin-text-xs);
-    font-weight: var(--velin-weight-bold);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--velin-color-text-muted);
-    margin-block-end: var(--velin-space-2);
-  }
-}
+@layer components {
+  .velin-nav {
+    display: flex;
+    align-items: center;
+    gap: var(--velin-space-2);
+    padding-block: var(--velin-space-3);
+    padding-inline: var(--velin-space-4);
+    background-color: var(--velin-color-surface-bright);
+    border-block-end: 1px solid var(--velin-color-border);
+  }
+
+  .velin-nav__brand {
+    font-size: var(--velin-text-lg);
+    font-weight: var(--velin-weight-bold);
+    color: var(--velin-color-text);
+    text-decoration: none;
+    margin-inline-end: auto;
+  }
+
+  .velin-nav__list {
+    display: flex;
+    align-items: center;
+    gap: var(--velin-space-1);
+    list-style: none;
+  }
+
+  .velin-nav__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--velin-space-1);
+    min-block-size: 2.75rem; /* 44px touch target */
+    padding-block: var(--velin-space-2);
+    padding-inline: var(--velin-space-3);
+    font-size: var(--velin-text-base);
+    font-weight: var(--velin-weight-medium);
+    color: var(--velin-color-text-muted);
+    text-decoration: none;
+    border-radius: var(--velin-radius-md);
+    transition: var(--velin-transition-colors);
+  }
+
+  .velin-nav__link:hover {
+    color: var(--velin-color-text);
+    background-color: var(--velin-color-surface-dim);
+  }
+
+  .velin-nav__link[aria-current="page"],
+  .velin-nav__link--active {
+    color: var(--velin-color-primary);
+    font-weight: var(--velin-weight-semibold);
+  }
+
+  /* Toggle button for mobile */
+  .velin-nav__toggle {
+    display: none;
+    min-block-size: 2.75rem;
+    min-inline-size: 2.75rem;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: var(--velin-color-text);
+    cursor: pointer;
+    border-radius: var(--velin-radius-md);
+  }
+
+  .velin-nav__toggle:hover {
+    background-color: var(--velin-color-surface-dim);
+  }
+
+  /* Mobile: stack nav vertically */
+  /* Aligns with --velin-bp-md (48rem) used in safe-area utilities */
+  @media (max-width: 47.999rem) {
+    .velin-nav {
+      flex-wrap: wrap;
+    }
+
+    .velin-nav__toggle {
+      display: inline-flex;
+    }
+
+    .velin-nav__list {
+      flex-direction: column;
+      align-items: stretch;
+      inline-size: 100%;
+      display: none;
+    }
+
+    .velin-nav__list[data-velin-open] {
+      display: flex;
+    }
+
+    .velin-nav__link {
+      inline-size: 100%;
+    }
+  }
+
+  /* Vertical nav variant */
+  .velin-nav--vertical {
+    flex-direction: column;
+    align-items: stretch;
+    border-block-end: none;
+    border-inline-end: 1px solid var(--velin-color-border);
+  }
+
+  .velin-nav--vertical .velin-nav__brand {
+    margin-inline-end: 0;
+    margin-block-end: var(--velin-space-4);
+  }
+
+  .velin-nav--vertical .velin-nav__list {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* Mega menu */
+  .velin-nav__mega {
+    position: absolute;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-start: 100%;
+    z-index: var(--velin-z-dropdown);
+    background: var(--velin-color-surface-bright);
+    border: 1px solid var(--velin-color-border);
+    border-radius: var(--velin-radius-lg);
+    box-shadow: var(--velin-shadow-lg);
+    padding: var(--velin-space-6);
+    display: none;
+  }
+
+  .velin-nav__item:hover > .velin-nav__mega,
+  .velin-nav__item:focus-within > .velin-nav__mega {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    gap: var(--velin-space-6);
+  }
+
+  .velin-nav__mega-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--velin-space-2);
+  }
+
+  .velin-nav__mega-title {
+    font-size: var(--velin-text-xs);
+    font-weight: var(--velin-weight-bold);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--velin-color-text-muted);
+    margin-block-end: var(--velin-space-2);
+  }
+}

package/src/tokens/motion.css

@@ -6,6 +6,8 @@
     --velin-duration-normal: 200ms;
     --velin-duration-slow: 300ms;
     --velin-duration-slower: 500ms;
+    --velin-duration-slowest: 800ms;
+    --velin-duration-cinematic: 1200ms;
 
     /* Easing curves */
     --velin-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
@@ -13,6 +15,11 @@
     --velin-ease-out: cubic-bezier(0, 0, 0.2, 1);
     --velin-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --velin-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --velin-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.4);
+    --velin-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+    --velin-ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --velin-ease-back-out: cubic-bezier(0.34, 1.4, 0.64, 1);
+    --velin-ease-snappy: cubic-bezier(0.2, 0.8, 0.2, 1);
 
     /* Common transitions */
     --velin-transition-colors: color var(--velin-duration-normal) var(--velin-ease-default),

package/src/utilities/animation.css

@@ -259,5 +259,101 @@
 
   /* === Hover trigger === */
   .velin-animate-hover { animation-play-state: paused; }
-  .velin-animate-hover:hover { animation-play-state: running; }
+  @media (hover: hover) and (pointer: fine) {
+    .velin-animate-hover:hover { animation-play-state: running; }
+  }
+
+  /* === 0.7.5 Animations === */
+  .velin-animate-blur-in {
+    animation: velin-blur-in var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+  .velin-animate-blur-out {
+    animation: velin-blur-out var(--velin-duration-normal) var(--velin-ease-in) both;
+  }
+  .velin-animate-rotate-in {
+    animation: velin-rotate-in var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+  .velin-animate-float {
+    animation: velin-float 3s var(--velin-ease-in-out) infinite;
+  }
+  .velin-animate-flash {
+    animation: velin-flash 0.6s var(--velin-ease-default) both;
+  }
+  .velin-animate-reveal-up {
+    animation: velin-reveal-up var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+  .velin-animate-reveal-down {
+    animation: velin-reveal-down var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+  .velin-animate-glow {
+    animation: velin-glow 2s var(--velin-ease-in-out) infinite;
+  }
+  .velin-animate-slide-fade-left {
+    animation: velin-slide-fade-left var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+  .velin-animate-slide-fade-right {
+    animation: velin-slide-fade-right var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+
+  @keyframes velin-blur-in {
+    from { opacity: 0; filter: blur(8px); }
+    to { opacity: 1; filter: blur(0); }
+  }
+  @keyframes velin-blur-out {
+    from { opacity: 1; filter: blur(0); }
+    to { opacity: 0; filter: blur(8px); }
+  }
+  @keyframes velin-rotate-in {
+    from { opacity: 0; transform: rotate(-8deg) scale(0.95); }
+    to { opacity: 1; transform: rotate(0) scale(1); }
+  }
+  @keyframes velin-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-0.35rem); }
+  }
+  @keyframes velin-flash {
+    0%, 50%, 100% { opacity: 1; }
+    25%, 75% { opacity: 0.35; }
+  }
+  @keyframes velin-reveal-up {
+    from { clip-path: inset(100% 0 0 0); opacity: 0; }
+    to { clip-path: inset(0 0 0 0); opacity: 1; }
+  }
+  @keyframes velin-reveal-down {
+    from { clip-path: inset(0 0 100% 0); opacity: 0; }
+    to { clip-path: inset(0 0 0 0); opacity: 1; }
+  }
+  @keyframes velin-glow {
+    0%, 100% { box-shadow: 0 0 0 0 transparent; }
+    50% { box-shadow: 0 0 1rem 0 color-mix(in oklch, var(--velin-color-primary, #2563eb) 35%, transparent); }
+  }
+  @keyframes velin-slide-fade-left {
+    from { opacity: 0; transform: translateX(1rem); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+  @keyframes velin-slide-fade-right {
+    from { opacity: 0; transform: translateX(-1rem); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .velin-animate-blur-in,
+    .velin-animate-blur-out,
+    .velin-animate-rotate-in,
+    .velin-animate-reveal-up,
+    .velin-animate-reveal-down,
+    .velin-animate-slide-fade-left,
+    .velin-animate-slide-fade-right {
+      animation: none;
+      opacity: 1;
+      filter: none;
+      transform: none;
+      clip-path: none;
+    }
+    .velin-animate-float,
+    .velin-animate-glow,
+    .velin-animate-flash {
+      animation: none;
+    }
+  }
 }

package/src/utilities/chart-animation.css

@@ -0,0 +1,101 @@
+/*
+ * Chart animation utilities — keyframes and helpers for sparkline draw-in,
+ * value bumps, live pulses, and count-up fades. Consumed by the
+ * <velin-sparkline>, <velin-counter>, <velin-live-dot> Web Components plus
+ * any plain SVG/HTML that wants a "live" feel without a chart library.
+ *
+ * Each animated class is gated by `prefers-reduced-motion: reduce` so the
+ * baseline experience stays calm. CSS custom properties exposed so authors
+ * can re-skin without forking selectors.
+ */
+
+@layer utilities {
+  /* === Keyframes === */
+  @keyframes velin-stroke-draw {
+    from { stroke-dashoffset: var(--velin-chart-len, 1000); }
+    to { stroke-dashoffset: 0; }
+  }
+
+  @keyframes velin-sparkline-glow {
+    0%, 100% {
+      filter: drop-shadow(0 0 0 transparent);
+    }
+    50% {
+      filter: drop-shadow(0 0 0.5rem color-mix(in oklch, var(--velin-chart-glow-color, var(--velin-color-primary, #2563eb)) 50%, transparent));
+    }
+  }
+
+  @keyframes velin-value-bump {
+    0% { transform: scale(1); }
+    35% { transform: scale(1.06); color: var(--velin-chart-bump-color, var(--velin-color-primary, #2563eb)); }
+    100% { transform: scale(1); }
+  }
+
+  @keyframes velin-live-pulse {
+    0% {
+      box-shadow: 0 0 0 0 color-mix(in oklch, var(--velin-live-color, var(--velin-color-success, oklch(60% 0.16 145))) 65%, transparent);
+    }
+    70% {
+      box-shadow: 0 0 0 0.65rem color-mix(in oklch, var(--velin-live-color, var(--velin-color-success, oklch(60% 0.16 145))) 0%, transparent);
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
+  @keyframes velin-count-fade {
+    from { opacity: 0; transform: translateY(0.4rem); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  /* === Utility classes === */
+  .velin-chart-line {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: var(--velin-chart-len, 1000);
+    stroke-dashoffset: 0;
+    animation: velin-stroke-draw var(--velin-duration-cinematic, 1200ms) var(--velin-ease-expo-out, ease-out) both;
+  }
+
+  .velin-chart-area {
+    fill: var(--velin-chart-area-fill, currentColor);
+    opacity: 0;
+    animation: velin-count-fade var(--velin-duration-slowest, 800ms) var(--velin-ease-expo-out, ease-out) 200ms forwards;
+  }
+
+  .velin-chart-glow {
+    animation: velin-sparkline-glow 2.4s var(--velin-ease-in-out, ease-in-out) infinite;
+  }
+
+  .velin-spark-tick {
+    animation: velin-value-bump var(--velin-duration-slow, 300ms) var(--velin-ease-spring, ease-out) both;
+  }
+
+  .velin-live-pulse {
+    animation: velin-live-pulse 1.8s var(--velin-ease-out, ease-out) infinite;
+    border-radius: 50%;
+  }
+
+  .velin-count-fade {
+    animation: velin-count-fade var(--velin-duration-slow, 300ms) var(--velin-ease-expo-out, ease-out) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .velin-chart-line,
+    .velin-chart-area,
+    .velin-chart-glow,
+    .velin-spark-tick,
+    .velin-live-pulse,
+    .velin-count-fade {
+      animation: none;
+      stroke-dashoffset: 0;
+      opacity: 1;
+      transform: none;
+      filter: none;
+      box-shadow: none;
+    }
+  }
+}

package/src/utilities/filter-effects.css

@@ -0,0 +1,103 @@
+/*
+ * Filter-Effect utilities — saturate, hue-rotate, contrast, invert, sepia,
+ * drop-shadow plus extended backdrop and glass composites.
+ *
+ * Layered under `utilities`; pair with the existing blur/brightness/grayscale
+ * helpers from src/utilities/position.css. The reduced-motion block at the
+ * bottom strips saturation/hue rotation because those distort color contrast
+ * for users who request reduced motion as a proxy for visual calm.
+ */
+
+@layer utilities {
+  /* === Saturate === */
+  .velin-saturate-0 { filter: saturate(0); }
+  .velin-saturate-50 { filter: saturate(0.5); }
+  .velin-saturate-100 { filter: saturate(1); }
+  .velin-saturate-150 { filter: saturate(1.5); }
+  .velin-saturate-200 { filter: saturate(2); }
+
+  /* === Hue rotate === */
+  .velin-hue-rotate-15 { filter: hue-rotate(15deg); }
+  .velin-hue-rotate-30 { filter: hue-rotate(30deg); }
+  .velin-hue-rotate-60 { filter: hue-rotate(60deg); }
+  .velin-hue-rotate-90 { filter: hue-rotate(90deg); }
+  .velin-hue-rotate-180 { filter: hue-rotate(180deg); }
+
+  /* === Contrast === */
+  .velin-contrast-50 { filter: contrast(0.5); }
+  .velin-contrast-75 { filter: contrast(0.75); }
+  .velin-contrast-100 { filter: contrast(1); }
+  .velin-contrast-125 { filter: contrast(1.25); }
+  .velin-contrast-150 { filter: contrast(1.5); }
+
+  /* === Invert === */
+  .velin-invert { filter: invert(1); }
+  .velin-invert-0 { filter: invert(0); }
+
+  /* === Sepia === */
+  .velin-sepia { filter: sepia(1); }
+  .velin-sepia-50 { filter: sepia(0.5); }
+  .velin-sepia-0 { filter: sepia(0); }
+
+  /* === Drop shadow (paints under transparent SVG/PNG content; differs from box-shadow) === */
+  .velin-drop-shadow-sm {
+    filter: drop-shadow(0 1px 1px oklch(0% 0 0 / 0.18));
+  }
+  .velin-drop-shadow-md {
+    filter: drop-shadow(0 4px 6px oklch(0% 0 0 / 0.18));
+  }
+  .velin-drop-shadow-lg {
+    filter: drop-shadow(0 12px 24px oklch(0% 0 0 / 0.22));
+  }
+  .velin-drop-shadow-glow {
+    filter: drop-shadow(0 0 1.5rem color-mix(in oklch, var(--velin-color-primary, #2563eb) 60%, transparent));
+  }
+
+  /* === Extended backdrop helpers === */
+  .velin-backdrop-saturate {
+    backdrop-filter: saturate(180%);
+    -webkit-backdrop-filter: saturate(180%);
+  }
+  .velin-backdrop-brightness-90 {
+    backdrop-filter: brightness(0.9);
+    -webkit-backdrop-filter: brightness(0.9);
+  }
+  .velin-backdrop-brightness-110 {
+    backdrop-filter: brightness(1.1);
+    -webkit-backdrop-filter: brightness(1.1);
+  }
+  .velin-backdrop-grayscale {
+    backdrop-filter: grayscale(1);
+    -webkit-backdrop-filter: grayscale(1);
+  }
+
+  /* === Glass composites — frosted surfaces for sticky bars/cards === */
+  .velin-glass {
+    background: color-mix(in oklch, var(--velin-color-surface-bright, #fff) 70%, transparent);
+    backdrop-filter: blur(12px) saturate(160%);
+    -webkit-backdrop-filter: blur(12px) saturate(160%);
+    border: 1px solid color-mix(in oklch, var(--velin-color-border, #ddd) 60%, transparent);
+  }
+  .velin-glass-strong {
+    background: color-mix(in oklch, var(--velin-color-surface-bright, #fff) 55%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid color-mix(in oklch, var(--velin-color-border, #ddd) 70%, transparent);
+  }
+
+  /* Reduced-motion / reduced-transparency: strip color distortion. */
+  @media (prefers-reduced-motion: reduce) {
+    .velin-saturate-0,
+    .velin-saturate-50,
+    .velin-saturate-100,
+    .velin-saturate-150,
+    .velin-saturate-200,
+    .velin-hue-rotate-15,
+    .velin-hue-rotate-30,
+    .velin-hue-rotate-60,
+    .velin-hue-rotate-90,
+    .velin-hue-rotate-180 {
+      filter: none;
+    }
+  }
+}

package/src/utilities/safe-area.css

@@ -0,0 +1,39 @@
+@layer utilities {
+  .velin-pt-safe {
+    padding-block-start: max(var(--velin-space-4, 1rem), env(safe-area-inset-top, 0px));
+  }
+
+  .velin-pb-safe {
+    padding-block-end: max(var(--velin-space-4, 1rem), env(safe-area-inset-bottom, 0px));
+  }
+
+  .velin-px-safe {
+    padding-inline: max(var(--velin-space-4, 1rem), env(safe-area-inset-left, 0px))
+      max(var(--velin-space-4, 1rem), env(safe-area-inset-right, 0px));
+  }
+
+  .velin-p-safe {
+    padding-block: max(var(--velin-space-4, 1rem), env(safe-area-inset-top, 0px))
+      max(var(--velin-space-4, 1rem), env(safe-area-inset-bottom, 0px));
+    padding-inline: max(var(--velin-space-4, 1rem), env(safe-area-inset-left, 0px))
+      max(var(--velin-space-4, 1rem), env(safe-area-inset-right, 0px));
+  }
+
+  .velin-mobile-only {
+    display: block;
+  }
+
+  .velin-desktop-only {
+    display: none;
+  }
+
+  @media (min-width: 48rem) {
+    .velin-mobile-only {
+      display: none;
+    }
+
+    .velin-desktop-only {
+      display: block;
+    }
+  }
+}