@birdapi/velinstyle 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdapi/velinstyle",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
@@ -43,8 +43,9 @@
     "test": "vitest run",
     "test:a11y": "node tests/a11y/run.js",
     "test:contrast": "node scripts/check-contrast.js",
+    "test:security": "vitest run tests/sanitize.test.js tests/cli-security-scanner.test.js",
     "docs:prepare": "npm run build && node scripts/prepare-docs-pages.js",
-    "docs:sync-site": "npm run build && node ../velinstyle-site/tools/sync-0.7.0.py"
+    "docs:sync-site": "npm run build && python ../velinstyle-site/tools/sync-0.7.0.py"
   },
   "keywords": [
     "css",

package/src/a11y/security.css

@@ -98,4 +98,22 @@
     transition: background-color 600000s 0s, color 600000s 0s;
   }
 
+  .velin-isolate {
+    isolation: isolate;
+    contain: layout style paint;
+  }
+
+  .velin-sensitive {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .velin-overlay-lock {
+    overscroll-behavior: contain;
+  }
+
+  .velin-user-content img[src^="data:"] {
+    max-inline-size: 100%;
+  }
+
 }

package/src/base/reset.css

@@ -152,7 +152,18 @@
   velin-scroll-top:not(:defined),
   velin-scrollspy:not(:defined),
   velin-theme-toggle:not(:defined),
-  velin-icon:not(:defined) {
+  velin-icon:not(:defined),
+  velin-combobox:not(:defined),
+  velin-bottom-nav:not(:defined),
+  velin-sheet:not(:defined),
+  velin-segmented-control:not(:defined),
+  velin-rating:not(:defined),
+  velin-menubar:not(:defined),
+  velin-command:not(:defined),
+  velin-announcer:not(:defined),
+  velin-sparkline:not(:defined),
+  velin-counter:not(:defined),
+  velin-live-dot:not(:defined) {
     opacity: 0;
     visibility: hidden;
   }

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;
+    }
+  }
+}