@birdapi/velinstyle 0.6.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdapi/velinstyle",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
@@ -17,7 +17,7 @@
     "type": "git",
     "url": "https://github.com/SkyliteDesign/velinstyle.git"
   },
-  "homepage": "https://velinstyle.info",
+  "homepage": "https://skylitedesign.github.io/velinstyle/",
   "bugs": {
     "url": "https://github.com/SkyliteDesign/velinstyle/issues"
   },
@@ -41,7 +41,11 @@
     "watch": "lightningcss --bundle src/velinstyle.css -o dist/velinstyle.css --watch",
     "lint": "stylelint \"src/**/*.css\"",
     "test": "vitest run",
-    "test:a11y": "node tests/a11y/run.js"
+    "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 && python ../velinstyle-site/tools/sync-0.7.0.py"
   },
   "keywords": [
     "css",

package/src/a11y/focus-not-obscured.css

@@ -0,0 +1,21 @@
+/* WCAG 2.4.11 Focus Not Obscured — scroll padding for fixed headers/nav */
+@layer a11y {
+  :root {
+    --velin-nav-height: 4rem;
+    scroll-padding-block-start: var(--velin-nav-height);
+  }
+
+  .velin-scroll-pt-nav {
+    scroll-padding-block-start: var(--velin-nav-height);
+  }
+
+  .velin-scroll-pt-none {
+    scroll-padding-block-start: 0;
+  }
+
+  /* Highlight skip target briefly when focused via skip link */
+  main:target,
+  [id="main"]:target {
+    scroll-margin-block-start: var(--velin-nav-height);
+  }
+}

package/src/a11y/forced-colors.css

@@ -1,38 +1,86 @@
-@layer a11y {
-  @media (forced-colors: active) {
-    .velin-btn,
-    .velin-badge,
-    .velin-alert {
-      border: 1px solid ButtonText;
-    }
-
-    .velin-btn--primary,
-    .velin-btn--secondary {
-      forced-color-adjust: none;
-      background-color: ButtonFace;
-      color: ButtonText;
-      border: 2px solid ButtonText;
-    }
-
-    .velin-btn--primary:hover,
-    .velin-btn--secondary:hover {
-      background-color: Highlight;
-      color: HighlightText;
-      border-color: Highlight;
-    }
-
-    .velin-input,
-    .velin-select,
-    .velin-textarea {
-      border: 1px solid ButtonText;
-    }
-
-    .velin-card {
-      border: 1px solid CanvasText;
-    }
-
-    .velin-nav__link[aria-current="page"] {
-      border-block-end: 2px solid Highlight;
-    }
-  }
-}
+@layer a11y {
+  @media (forced-colors: active) {
+    .velin-btn,
+    .velin-badge,
+    .velin-alert {
+      border: 1px solid ButtonText;
+    }
+
+    .velin-btn--primary,
+    .velin-btn--secondary {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      color: ButtonText;
+      border: 2px solid ButtonText;
+    }
+
+    .velin-btn--primary:hover,
+    .velin-btn--secondary:hover {
+      background-color: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+
+    .velin-input,
+    .velin-select,
+    .velin-textarea {
+      border: 1px solid ButtonText;
+    }
+
+    .velin-card {
+      border: 1px solid CanvasText;
+    }
+
+    .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"] {
+      background-color: Highlight;
+      color: HighlightText;
+      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 {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    .velin-modal__backdrop,
+    .velin-drawer__backdrop {
+      background-color: Canvas;
+      opacity: 1;
+    }
+
+    .velin-progress__bar {
+      border: 1px solid ButtonText;
+    }
+
+    .velin-progress__fill {
+      background-color: Highlight;
+    }
+  }
+}

package/src/a11y/high-contrast-aaa.css

@@ -0,0 +1,37 @@
+/* WCAG 1.4.6 Contrast (Enhanced) — optional AAA via data-velin-contrast="aaa" */
+@layer a11y {
+  :root[data-velin-contrast="aaa"] {
+    --velin-color-text: oklch(8% 0.01 250);
+    --velin-color-text-muted: oklch(28% 0.01 250);
+    --velin-color-text-subtle: oklch(38% 0.01 250);
+    --velin-color-border: oklch(35% 0.01 250);
+    --velin-color-border-strong: oklch(20% 0.01 250);
+    --velin-color-primary: oklch(38% 0.18 250);
+    --velin-color-primary-hover: oklch(32% 0.18 250);
+    --velin-color-on-primary: oklch(100% 0 0);
+    --velin-color-focus: oklch(35% 0.22 250);
+  }
+
+  :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% 0.005 250);
+      --velin-color-text-muted: oklch(82% 0.005 250);
+      --velin-color-text-subtle: oklch(72% 0.005 250);
+      --velin-color-border: oklch(55% 0.01 250);
+      --velin-color-border-strong: oklch(70% 0.01 250);
+      --velin-color-primary: oklch(78% 0.14 250);
+      --velin-color-on-primary: oklch(8% 0.01 250);
+    }
+  }
+
+  :root[data-velin-contrast="aaa"] .velin-btn {
+    border-width: 2px;
+  }
+
+  :root[data-velin-contrast="aaa"] .velin-input,
+  :root[data-velin-contrast="aaa"] .velin-select,
+  :root[data-velin-contrast="aaa"] .velin-textarea {
+    border-width: 2px;
+  }
+}

package/src/a11y/preferences.css

@@ -1,85 +1,106 @@
-@layer a11y {
-  /* Smart User-Preference Queries */
-
-  /* High Contrast -- thicker borders, stronger text */
-  @media (prefers-contrast: more) {
-    :root {
-      --velin-color-text: oklch(10% 0 0);
-      --velin-color-text-muted: oklch(30% 0 0);
-      --velin-color-border: oklch(30% 0 0);
-      --velin-color-border-strong: oklch(10% 0 0);
-      --velin-shadow-sm: none;
-      --velin-shadow-md: none;
-      --velin-shadow-lg: none;
-    }
-
-    .velin-btn {
-      border-width: 2px;
-    }
-
-    .velin-card {
-      border-width: 2px;
-    }
-
-    .velin-input,
-    .velin-select,
-    .velin-textarea {
-      border-width: 2px;
-    }
-
-    .velin-badge {
-      border: 1px solid currentColor;
-    }
-
-    .velin-divider {
-      border-width: 2px;
-    }
-  }
-
-  /* Low Contrast -- softer, less visual density */
-  @media (prefers-contrast: less) {
-    :root {
-      --velin-color-border: oklch(85% 0.01 250);
-      --velin-color-border-strong: oklch(70% 0.01 250);
-    }
-
-    .velin-card {
-      border-color: transparent;
-    }
-
-    .velin-divider {
-      opacity: 0.5;
-    }
-  }
-
-  /* Reduced Transparency -- opaque backgrounds everywhere */
-  @media (prefers-reduced-transparency) {
-    :root {
-      --velin-color-overlay: oklch(15% 0 0);
-      --velin-color-surface-dim: oklch(95% 0.005 250);
-    }
-
-    .velin-card {
-      backdrop-filter: none;
-      background: var(--velin-color-surface-bright);
-    }
-
-    .velin-nav {
-      backdrop-filter: none;
-      background: var(--velin-color-surface-bright);
-    }
-
-    .velin-alert {
-      backdrop-filter: none;
-    }
-
-    .velin-chip {
-      backdrop-filter: none;
-    }
-
-    [data-velin-theme="dark"] .velin-card,
-    [data-velin-theme="dark"] .velin-nav {
-      background: var(--velin-color-surface);
-    }
-  }
-}
+@layer a11y {
+  /* Smart User-Preference Queries */
+
+  /* High Contrast -- thicker borders, stronger text */
+  @media (prefers-contrast: more) {
+    :root {
+      --velin-color-text: oklch(10% 0 0);
+      --velin-color-text-muted: oklch(30% 0 0);
+      --velin-color-border: oklch(30% 0 0);
+      --velin-color-border-strong: oklch(10% 0 0);
+      --velin-shadow-sm: none;
+      --velin-shadow-md: none;
+      --velin-shadow-lg: none;
+    }
+
+    .velin-btn {
+      border-width: 2px;
+    }
+
+    .velin-card {
+      border-width: 2px;
+    }
+
+    .velin-input,
+    .velin-select,
+    .velin-textarea {
+      border-width: 2px;
+    }
+
+    .velin-badge {
+      border: 1px solid currentColor;
+    }
+
+    .velin-divider {
+      border-width: 2px;
+    }
+
+    .velin-nav__link {
+      font-weight: var(--velin-weight-semibold);
+    }
+
+    .velin-pagination__link {
+      border-width: 2px;
+    }
+
+    .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);
+    }
+  }
+
+  /* Low Contrast -- softer, less visual density */
+  @media (prefers-contrast: less) {
+    :root {
+      --velin-color-border: oklch(85% 0.01 250);
+      --velin-color-border-strong: oklch(70% 0.01 250);
+    }
+
+    .velin-card {
+      border-color: transparent;
+    }
+
+    .velin-divider {
+      opacity: 0.5;
+    }
+  }
+
+  /* Reduced Transparency -- opaque backgrounds everywhere */
+  @media (prefers-reduced-transparency) {
+    :root {
+      --velin-color-overlay: oklch(15% 0 0);
+      --velin-color-surface-dim: oklch(95% 0.005 250);
+    }
+
+    .velin-card {
+      backdrop-filter: none;
+      background: var(--velin-color-surface-bright);
+    }
+
+    .velin-nav {
+      backdrop-filter: none;
+      background: var(--velin-color-surface-bright);
+    }
+
+    .velin-alert {
+      backdrop-filter: none;
+    }
+
+    .velin-chip {
+      backdrop-filter: none;
+    }
+
+    [data-velin-theme="dark"] .velin-card,
+    [data-velin-theme="dark"] .velin-nav {
+      background: var(--velin-color-surface);
+    }
+  }
+}

package/src/a11y/security.css

@@ -1,104 +1,119 @@
-/* ===================================================================
-   VelinStyle Security Utilities
-   CSS-level security helpers for content sandboxing and safe defaults.
-   =================================================================== */
-
-@layer a11y {
-
-  /* ---- Clickjacking Protection ----
-     Wrap page content in .velin-secure-frame. If the page is loaded inside
-     an <iframe> without styles, the content stays hidden. Only when styles
-     load (same-origin) does the content appear. Complement with HTTP
-     X-Frame-Options / CSP frame-ancestors header for full protection. */
-  .velin-secure-frame {
-    display: none;
-  }
-  @media all {
-    .velin-secure-frame {
-      display: block;
-    }
-  }
-
-  /* ---- Safe External Links ----
-     Force rel="noopener noreferrer" behavior. The CSS-only version
-     provides a visual indicator. Developers should still add
-     rel="noopener noreferrer" in HTML; this is a safety net. */
-  a[target="_blank"]:not([rel~="noopener"]) {
-    &::after {
-      content: " ↗";
-      font-size: 0.75em;
-      vertical-align: super;
-    }
-  }
-
-  /* ---- User-Generated Content Container ----
-     Sandboxes untrusted content by resetting inherited styles,
-     enabling CSS containment, and hiding dangerous elements. */
-  .velin-user-content {
-    all: initial;
-    display: block;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    color: inherit;
-    contain: layout style paint;
-    overflow: hidden;
-    word-break: break-word;
-    overflow-wrap: break-word;
-  }
-
-  .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;
-  }
-
-  /* Hide potentially dangerous embedded elements */
-  .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;
-  }
-
-  /* ---- Data Attribute Leakage Prevention ----
-     Prevent CSS exfiltration attacks via attribute selectors.
-     The content property is locked to normal on sensitive fields. */
-  input[type="password"],
-  input[type="email"],
-  input[type="tel"],
-  input[type="number"][inputmode="numeric"] {
-    -webkit-text-security: disc;
-  }
-  input[type="password"]::after,
-  input[type="password"]::before {
-    content: normal !important;
-  }
-
-  /* ---- Prevent Paste-jacking ----
-     Ensure user can always paste into inputs */
-  input:not([data-velin-no-paste]),
-  textarea:not([data-velin-no-paste]) {
-    -webkit-user-modify: read-write;
-  }
-
-  /* ---- Disable autofill background color leaking ----
-     Prevents browsers from applying unwanted background colors
-     on autofilled inputs that could leak info via CSS. */
-  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 0s, color 600000s 0s;
-  }
-
-}
+/* ===================================================================
+   VelinStyle Security Utilities
+   CSS-level security helpers for content sandboxing and safe defaults.
+   =================================================================== */
+
+@layer security {
+
+  /* ---- Clickjacking Protection ----
+     Wrap page content in .velin-secure-frame. If the page is loaded inside
+     an <iframe> without styles, the content stays hidden. Only when styles
+     load (same-origin) does the content appear. Complement with HTTP
+     X-Frame-Options / CSP frame-ancestors header for full protection. */
+  .velin-secure-frame {
+    display: none;
+  }
+  @media all {
+    .velin-secure-frame {
+      display: block;
+    }
+  }
+
+  /* ---- Safe External Links ----
+     Force rel="noopener noreferrer" behavior. The CSS-only version
+     provides a visual indicator. Developers should still add
+     rel="noopener noreferrer" in HTML; this is a safety net. */
+  a[target="_blank"]:not([rel~="noopener"]) {
+    &::after {
+      content: " ↗";
+      font-size: 0.75em;
+      vertical-align: super;
+    }
+  }
+
+  /* ---- User-Generated Content Container ----
+     Sandboxes untrusted content by resetting inherited styles,
+     enabling CSS containment, and hiding dangerous elements. */
+  .velin-user-content {
+    all: initial;
+    display: block;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+    contain: layout style paint;
+    overflow: hidden;
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+
+  .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;
+  }
+
+  /* Hide potentially dangerous embedded elements */
+  .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;
+  }
+
+  /* ---- Data Attribute Leakage Prevention ----
+     Prevent CSS exfiltration attacks via attribute selectors.
+     The content property is locked to normal on sensitive fields. */
+  input[type="password"] {
+    -webkit-text-security: disc;
+  }
+  input[type="password"]::after,
+  input[type="password"]::before {
+    content: normal !important;
+  }
+
+  /* ---- Prevent Paste-jacking ----
+     Ensure user can always paste into inputs */
+  input:not([data-velin-no-paste]),
+  textarea:not([data-velin-no-paste]) {
+    -webkit-user-modify: read-write;
+  }
+
+  /* ---- Disable autofill background color leaking ----
+     Prevents browsers from applying unwanted background colors
+     on autofilled inputs that could leak info via CSS. */
+  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 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/a11y/target-size.css

@@ -0,0 +1,32 @@
+/* WCAG 2.5.8 Target Size (Minimum) — 24×24 minimum; 44×44 for primary controls */
+@layer a11y {
+  .velin-target-min {
+    min-block-size: 1.5rem; /* 24px */
+    min-inline-size: 1.5rem;
+  }
+
+  .velin-target-touch {
+    min-block-size: 2.75rem; /* 44px */
+    min-inline-size: 2.75rem;
+  }
+
+  .velin-alert__close,
+  .velin-toast-close {
+    min-block-size: 2.75rem;
+    min-inline-size: 2.75rem;
+  }
+
+  .velin-btn--sm {
+    min-block-size: 2.75rem;
+    min-inline-size: 2.75rem;
+  }
+
+  .velin-pagination__ellipsis {
+    min-inline-size: 2.75rem;
+  }
+
+  .velin-pagination--sm .velin-pagination__link {
+    min-block-size: 2.75rem;
+    min-inline-size: 2.75rem;
+  }
+}

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