@birdapi/velinstyle 0.6.1 → 0.8.0

package/dist/velinstyle.css

@@ -196,11 +196,18 @@
     --velin-duration-normal: .2s;
     --velin-duration-slow: .3s;
     --velin-duration-slower: .5s;
+    --velin-duration-slowest: .8s;
+    --velin-duration-cinematic: 1.2s;
     --velin-ease-default: cubic-bezier(.4, 0, .2, 1);
     --velin-ease-in: cubic-bezier(.4, 0, 1, 1);
     --velin-ease-out: cubic-bezier(0, 0, .2, 1);
     --velin-ease-in-out: cubic-bezier(.4, 0, .2, 1);
     --velin-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
+    --velin-ease-spring: cubic-bezier(.34, 1.56, .64, 1.4);
+    --velin-ease-elastic: cubic-bezier(.68, -.6, .32, 1.6);
+    --velin-ease-expo-out: cubic-bezier(.16, 1, .3, 1);
+    --velin-ease-back-out: cubic-bezier(.34, 1.4, .64, 1);
+    --velin-ease-snappy: cubic-bezier(.2, .8, .2, 1);
     --velin-transition-colors: color var(--velin-duration-normal) var(--velin-ease-default),
       background-color var(--velin-duration-normal) var(--velin-ease-default),
       border-color var(--velin-duration-normal) var(--velin-ease-default);
@@ -334,7 +341,7 @@
     display: none !important;
   }
 
-  velin-modal:not(:defined), velin-drawer:not(:defined), velin-tabs:not(:defined), velin-accordion:not(:defined), velin-dropdown:not(:defined), velin-toast:not(:defined), velin-dialog:not(:defined), velin-popover:not(:defined), velin-tooltip-wc:not(:defined), velin-lightbox:not(:defined), velin-carousel:not(:defined), velin-collapse:not(:defined), velin-stepper-wc:not(:defined), velin-countdown:not(:defined), velin-progress-ring:not(:defined), velin-persist:not(:defined), velin-copy:not(:defined), velin-scroll-top:not(:defined), velin-scrollspy:not(:defined), velin-theme-toggle:not(:defined), velin-icon:not(:defined) {
+  velin-modal:not(:defined), velin-drawer:not(:defined), velin-tabs:not(:defined), velin-accordion:not(:defined), velin-dropdown:not(:defined), velin-toast:not(:defined), velin-dialog:not(:defined), velin-popover:not(:defined), velin-tooltip-wc:not(:defined), velin-lightbox:not(:defined), velin-carousel:not(:defined), velin-collapse:not(:defined), velin-stepper-wc:not(:defined), velin-countdown:not(:defined), velin-progress-ring:not(:defined), velin-persist:not(:defined), velin-copy:not(:defined), velin-scroll-top:not(:defined), velin-scrollspy:not(:defined), velin-theme-toggle: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;
   }
@@ -616,6 +623,51 @@
     .velin-nav__link[aria-current="page"] {
       border-block-end: 2px solid highlight;
     }
+
+    .velin-switch__track {
+      border: 1px solid buttontext;
+    }
+
+    .velin-switch__input:checked + .velin-switch__track {
+      background-color: highlight;
+      border-color: highlight;
+    }
+
+    .velin-pagination__link {
+      border: 1px solid buttontext;
+    }
+
+    .velin-pagination__link--active, .velin-pagination__link[aria-current="page"] {
+      color: highlighttext;
+      background-color: highlight;
+      border-color: highlight;
+    }
+
+    .velin-chip {
+      border: 1px solid buttontext;
+    }
+
+    .velin-stepper .step__marker {
+      border: 2px solid buttontext;
+    }
+
+    .velin-stepper .step--active .step__marker, .velin-stepper .step[aria-current="step"] .step__marker {
+      color: highlighttext;
+      background-color: highlight;
+    }
+
+    .velin-modal__backdrop, .velin-drawer__backdrop {
+      opacity: 1;
+      background-color: canvas;
+    }
+
+    .velin-progress__bar {
+      border: 1px solid buttontext;
+    }
+
+    .velin-progress__fill {
+      background-color: highlight;
+    }
   }
 
   .velin-skeleton {
@@ -702,6 +754,22 @@
     .velin-divider {
       border-width: 2px;
     }
+
+    .velin-nav__link {
+      font-weight: var(--velin-weight-semibold);
+    }
+
+    .velin-pagination__link, .velin-table th, .velin-table td {
+      border-width: 2px;
+    }
+
+    .velin-stepper .step__connector {
+      block-size: 3px;
+    }
+
+    .velin-stepper .step__label {
+      font-weight: var(--velin-weight-semibold);
+    }
   }
 
   @media (prefers-contrast: less) {
@@ -739,67 +807,68 @@
     }
   }
 
-  .velin-secure-frame {
-    display: none;
+  :root {
+    --velin-nav-height: 4rem;
+    scroll-padding-block-start: var(--velin-nav-height);
   }
 
-  @media all {
-    .velin-secure-frame {
-      display: block;
-    }
+  .velin-scroll-pt-nav {
+    scroll-padding-block-start: var(--velin-nav-height);
   }
 
-  a[target="_blank"]:not([rel~="noopener"]) {
-    &:after {
-      content: " ↗";
-      vertical-align: super;
-      font-size: .75em;
-    }
+  .velin-scroll-pt-none {
+    scroll-padding-block-start: 0;
   }
 
-  .velin-user-content {
-    all: initial;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    color: inherit;
-    contain: layout style paint;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    display: block;
-    overflow: hidden;
+  main:target, [id="main"]:target {
+    scroll-margin-block-start: var(--velin-nav-height);
   }
 
-  .velin-user-content img, .velin-user-content video {
-    max-width: 100%;
-    height: auto;
+  .velin-target-min {
+    min-block-size: 1.5rem;
+    min-inline-size: 1.5rem;
   }
 
-  .velin-user-content a {
-    color: var(--velin-color-primary, #2563eb);
-    text-decoration: underline;
+  .velin-target-touch, .velin-alert__close, .velin-toast-close, .velin-btn--sm {
+    min-block-size: 2.75rem;
+    min-inline-size: 2.75rem;
   }
 
-  .velin-user-content script, .velin-user-content iframe, .velin-user-content object, .velin-user-content embed, .velin-user-content applet, .velin-user-content form[action], .velin-user-content [onload], .velin-user-content [onerror], .velin-user-content [onclick] {
-    display: none !important;
+  .velin-pagination__ellipsis {
+    min-inline-size: 2.75rem;
   }
 
-  input[type="password"], input[type="email"], input[type="tel"], input[type="number"][inputmode="numeric"] {
-    -webkit-text-security: disc;
+  .velin-pagination--sm .velin-pagination__link {
+    min-block-size: 2.75rem;
+    min-inline-size: 2.75rem;
   }
 
-  input[type="password"]:after, input[type="password"]:before {
-    content: normal !important;
+  :root[data-velin-contrast="aaa"] {
+    --velin-color-text: oklch(8% .01 250);
+    --velin-color-text-muted: oklch(28% .01 250);
+    --velin-color-text-subtle: oklch(38% .01 250);
+    --velin-color-border: oklch(35% .01 250);
+    --velin-color-border-strong: oklch(20% .01 250);
+    --velin-color-primary: oklch(38% .18 250);
+    --velin-color-primary-hover: oklch(32% .18 250);
+    --velin-color-on-primary: oklch(100% 0 0);
+    --velin-color-focus: oklch(35% .22 250);
   }
 
-  input:not([data-velin-no-paste]), textarea:not([data-velin-no-paste]) {
-    -webkit-user-modify: read-write;
+  :root[data-velin-contrast="aaa"][data-velin-theme="dark"], :root[data-velin-contrast="aaa"]:not([data-velin-theme="light"]) {
+    @media (prefers-color-scheme: dark) {
+      --velin-color-text: oklch(98% .005 250);
+      --velin-color-text-muted: oklch(82% .005 250);
+      --velin-color-text-subtle: oklch(72% .005 250);
+      --velin-color-border: oklch(55% .01 250);
+      --velin-color-border-strong: oklch(70% .01 250);
+      --velin-color-primary: oklch(78% .14 250);
+      --velin-color-on-primary: oklch(8% .01 250);
+    }
   }
 
-  input:-webkit-autofill {
-    -webkit-box-shadow: 0 0 0 1000px var(--velin-color-surface-bright, #fff) inset;
-    -webkit-text-fill-color: var(--velin-color-text, #1a1a2e);
-    transition: background-color 600000s, color 600000s;
+  :root[data-velin-contrast="aaa"] .velin-btn, :root[data-velin-contrast="aaa"] .velin-input, :root[data-velin-contrast="aaa"] .velin-select, :root[data-velin-contrast="aaa"] .velin-textarea {
+    border-width: 2px;
   }
 }
 
@@ -6364,8 +6433,414 @@
     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;
+    }
+  }
+
+  .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 .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();
+    }
+  }
+
+  @keyframes velin-blur-out {
+    from {
+      opacity: 1;
+      filter: blur();
+    }
+
+    to {
+      opacity: 0;
+      filter: blur(8px);
+    }
+  }
+
+  @keyframes velin-rotate-in {
+    from {
+      opacity: 0;
+      transform: rotate(-8deg) scale(.95);
+    }
+
+    to {
+      opacity: 1;
+      transform: rotate(0) scale(1);
+    }
+  }
+
+  @keyframes velin-float {
+    0%, 100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-.35rem);
+    }
+  }
+
+  @keyframes velin-flash {
+    0%, 50%, 100% {
+      opacity: 1;
+    }
+
+    25%, 75% {
+      opacity: .35;
+    }
+  }
+
+  @keyframes velin-reveal-up {
+    from {
+      clip-path: inset(100% 0 0);
+      opacity: 0;
+    }
+
+    to {
+      clip-path: inset(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes velin-reveal-down {
+    from {
+      clip-path: inset(0 0 100%);
+      opacity: 0;
+    }
+
+    to {
+      clip-path: inset(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes velin-glow {
+    0%, 100% {
+      box-shadow: 0 0 #0000;
+    }
+
+    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 {
+      opacity: 1;
+      filter: none;
+      clip-path: none;
+      animation: none;
+      transform: none;
+    }
+
+    .velin-animate-float, .velin-animate-glow, .velin-animate-flash {
+      animation: none;
+    }
+  }
+
+  .velin-saturate-0 {
+    filter: saturate(0);
+  }
+
+  .velin-saturate-50 {
+    filter: saturate(.5);
+  }
+
+  .velin-saturate-100 {
+    filter: saturate();
+  }
+
+  .velin-saturate-150 {
+    filter: saturate(1.5);
+  }
+
+  .velin-saturate-200 {
+    filter: saturate(2);
+  }
+
+  .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);
+  }
+
+  .velin-contrast-50 {
+    filter: contrast(.5);
+  }
+
+  .velin-contrast-75 {
+    filter: contrast(.75);
+  }
+
+  .velin-contrast-100 {
+    filter: contrast();
+  }
+
+  .velin-contrast-125 {
+    filter: contrast(1.25);
+  }
+
+  .velin-contrast-150 {
+    filter: contrast(1.5);
+  }
+
+  .velin-invert {
+    filter: invert();
+  }
+
+  .velin-invert-0 {
+    filter: invert(0);
+  }
+
+  .velin-sepia {
+    filter: sepia();
+  }
+
+  .velin-sepia-50 {
+    filter: sepia(.5);
+  }
+
+  .velin-sepia-0 {
+    filter: sepia(0);
+  }
+
+  .velin-drop-shadow-sm {
+    filter: drop-shadow(0 1px 1px oklch(0% 0 0 / .18));
+  }
+
+  .velin-drop-shadow-md {
+    filter: drop-shadow(0 4px 6px oklch(0% 0 0 / .18));
+  }
+
+  .velin-drop-shadow-lg {
+    filter: drop-shadow(0 12px 24px oklch(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));
+  }
+
+  .velin-backdrop-saturate {
+    -webkit-backdrop-filter: saturate(180%);
+  }
+
+  .velin-backdrop-brightness-90 {
+    -webkit-backdrop-filter: brightness(.9);
+  }
+
+  .velin-backdrop-brightness-110 {
+    -webkit-backdrop-filter: brightness(1.1);
+  }
+
+  .velin-backdrop-grayscale {
+    -webkit-backdrop-filter: grayscale();
+  }
+
+  .velin-glass {
+    background: color-mix(in oklch, var(--velin-color-surface-bright, #fff) 70%, transparent);
+    -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);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid color-mix(in oklch, var(--velin-color-border, #ddd) 70%, transparent);
+  }
+
+  @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;
+    }
+  }
+
+  @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 #0000);
+    }
+
+    50% {
+      filter: drop-shadow(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% {
+      color: var(--velin-chart-bump-color, var(--velin-color-primary, #2563eb));
+      transform: scale(1.06);
+    }
+
+    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% .16 145))) 65%, transparent);
+    }
+
+    70% {
+      box-shadow: 0 0 0 .65rem color-mix(in oklch, var(--velin-live-color, var(--velin-color-success, oklch(60% .16 145))) 0%, transparent);
+    }
+
+    100% {
+      box-shadow: 0 0 #0000;
+    }
+  }
+
+  @keyframes velin-count-fade {
+    from {
+      opacity: 0;
+      transform: translateY(.4rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .velin-chart-line {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: var(--velin-chart-len, 1000);
+    stroke-dashoffset: 0;
+    animation: velin-stroke-draw var(--velin-duration-cinematic, 1.2s) 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, .8s) var(--velin-ease-expo-out, ease-out) .2s 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, .3s) 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, .3s) 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 {
+      stroke-dashoffset: 0;
+      opacity: 1;
+      filter: none;
+      box-shadow: none;
+      animation: none;
+      transform: none;
+    }
   }
 
   .velin-gradient-primary {
@@ -7426,6 +7901,44 @@
     }
   }
 
+  .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 (width >= 48rem) {
+    .velin-mobile-only {
+      display: none;
+    }
+
+    .velin-desktop-only {
+      display: block;
+    }
+  }
+
   .velin-divide-y > * + * {
     border-block-start: 1px solid var(--velin-color-border);
   }
@@ -8557,4 +9070,87 @@
   }
 }
 
+@layer security {
+  .velin-secure-frame {
+    display: none;
+  }
+
+  @media all {
+    .velin-secure-frame {
+      display: block;
+    }
+  }
+
+  a[target="_blank"]:not([rel~="noopener"]) {
+    &:after {
+      content: " ↗";
+      vertical-align: super;
+      font-size: .75em;
+    }
+  }
+
+  .velin-user-content {
+    all: initial;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+    contain: layout style paint;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    display: block;
+    overflow: hidden;
+  }
+
+  .velin-user-content img, .velin-user-content video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .velin-user-content a {
+    color: var(--velin-color-primary, #2563eb);
+    text-decoration: underline;
+  }
+
+  .velin-user-content script, .velin-user-content iframe, .velin-user-content object, .velin-user-content embed, .velin-user-content applet, .velin-user-content form[action], .velin-user-content [onload], .velin-user-content [onerror], .velin-user-content [onclick] {
+    display: none !important;
+  }
+
+  input[type="password"] {
+    -webkit-text-security: disc;
+  }
+
+  input[type="password"]:after, input[type="password"]:before {
+    content: normal !important;
+  }
+
+  input:not([data-velin-no-paste]), textarea:not([data-velin-no-paste]) {
+    -webkit-user-modify: read-write;
+  }
+
+  input:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0 1000px var(--velin-color-surface-bright, #fff) inset;
+    -webkit-text-fill-color: var(--velin-color-text, #1a1a2e);
+    transition: background-color 600000s, color 600000s;
+  }
+
+  .velin-isolate {
+    isolation: isolate;
+    contain: layout style paint;
+  }
+
+  .velin-sensitive {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .velin-overlay-lock {
+    overscroll-behavior: contain;
+  }
+
+  .velin-user-content img[src^="data:"] {
+    max-inline-size: 100%;
+  }
+}
+
 @layer themes;