@birdapi/velinstyle 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdapi/velinstyle",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
@@ -50,8 +50,10 @@
     "icons/velin-icons.svg"
   ],
   "scripts": {
-    "build": "npm run build:css:min && npm run build:css:dev && npm run build:js:min && npm run build:js:dev && npm run build:js:iife && npm run build:js:chunks && npm run build:loaders && npm run build:types && npm run build:themes && npm run build:icons",
+    "build": "npm run build:css:min && npm run build:css:dev && npm run build:js:min && npm run build:js:dev && npm run build:js:iife && npm run build:js:chunks && npm run build:loaders && npm run build:react:src && npm run build:types && npm run build:themes && npm run build:icons",
     "build:loaders": "node scripts/generate-component-loaders.mjs",
+    "build:react:src": "node scripts/generate-react-wrappers.mjs",
+    "build:react": "npm run build:react:src && npm --prefix packages/react run build",
     "build:types": "node scripts/generate-types.mjs",
     "build:js:chunks": "esbuild components/runtime-entry.js --bundle --splitting --format=esm --outdir=dist/chunks --chunk-names=[name]-[hash]",
     "build:css:min": "lightningcss --bundle --minify src/velinstyle.css -o dist/velinstyle.min.css",
@@ -80,6 +82,10 @@
     "search:index": "node cli/index.js search index",
     "meta:build": "node cli/index.js meta",
     "ci:checks": "node scripts/ci-checks.mjs",
+    "release:check": "node scripts/check-release-sync.mjs",
+    "release:sync": "node scripts/check-release-sync.mjs --fix",
+    "prepublishOnly": "npm run build && npm run search:index && npm run meta:build && npm run release:check -- --skip-site",
+    "pack:check": "npm pack --dry-run",
     "docs:prepare": "npm run build && node scripts/prepare-docs-pages.js",
     "docs:patch-nav": "node scripts/patch-docs-nav.js",
     "docs:sync-site": "npm run build && npm run docs:generate && python ../velinstyle-site/tools/sync-framework-0.9.0.py && python ../velinstyle-site/tools/patch-site-a11y-aaa.py && python ../velinstyle-site/tools/patch-docs-090-final.py",

package/src/base/wc-placeholder.css

@@ -99,4 +99,11 @@
     opacity: 0;
     visibility: hidden;
   }
+
+  /* The table renders before upgrade, so only reserve the block for enhancement. */
+  velin-data-table:not(:defined),
+  velin-form-summary:not(:defined) {
+    display: block;
+    contain: layout style;
+  }
 }

package/src/components/data-table.css

@@ -0,0 +1,93 @@
+@layer components {
+  .velin-data-table {
+    display: block;
+  }
+
+  /*
+   * Wins over the stacked `display: block` rows in table.css so filtering and
+   * pagination keep hidden rows out of the layout and the a11y tree.
+   */
+  .velin-data-table tr[hidden] {
+    display: none;
+  }
+
+  .velin-data-table__th {
+    padding: 0;
+  }
+
+  .velin-data-table__sort {
+    display: flex;
+    align-items: center;
+    gap: var(--velin-space-2);
+    inline-size: 100%;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-3) var(--velin-space-4);
+    border: none;
+    background: none;
+    font: inherit;
+    font-weight: var(--velin-weight-semibold);
+    color: inherit;
+    text-align: inherit;
+    cursor: pointer;
+  }
+
+  .velin-data-table__sort:hover {
+    background-color: var(--velin-color-surface-dim);
+  }
+
+  .velin-data-table__sort-icon {
+    flex-shrink: 0;
+    inline-size: 0.75rem;
+    color: var(--velin-color-text-muted);
+  }
+
+  /* Direction is announced via aria-sort; the glyph is decorative. */
+  .velin-data-table__sort-icon::after {
+    content: "\2195";
+  }
+
+  [aria-sort="ascending"] .velin-data-table__sort-icon::after {
+    content: "\2191";
+  }
+
+  [aria-sort="descending"] .velin-data-table__sort-icon::after {
+    content: "\2193";
+  }
+
+  [aria-sort="ascending"] .velin-data-table__sort-icon,
+  [aria-sort="descending"] .velin-data-table__sort-icon {
+    color: var(--velin-color-primary);
+  }
+
+  .velin-data-table__empty td {
+    padding-block: var(--velin-space-6);
+    color: var(--velin-color-text-muted);
+    text-align: center;
+  }
+
+  .velin-data-table__pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--velin-space-3);
+    flex-wrap: wrap;
+    margin-block-start: var(--velin-space-4);
+  }
+
+  .velin-data-table__page-status {
+    margin: 0;
+    color: var(--velin-color-text-muted);
+    font-size: var(--velin-text-sm);
+  }
+
+  @media (forced-colors: active) {
+    .velin-data-table__sort:hover {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    .velin-data-table__sort-icon {
+      color: CanvasText;
+    }
+  }
+}

package/src/components/form-validation.css

@@ -58,6 +58,46 @@
     white-space: normal;
   }
 
+  /* Error summary (velin-form-summary) */
+  .velin-form-summary {
+    display: block;
+  }
+
+  .velin-form-summary[hidden] {
+    display: none;
+  }
+
+  .velin-form-summary__panel {
+    margin-block-end: var(--velin-space-4);
+  }
+
+  .velin-form-summary__heading {
+    margin: 0 0 var(--velin-space-2);
+    font-weight: var(--velin-weight-semibold);
+  }
+
+  .velin-form-summary__list {
+    margin: 0;
+    padding-inline-start: var(--velin-space-5);
+  }
+
+  .velin-form-summary__list li + li {
+    margin-block-start: var(--velin-space-1);
+  }
+
+  /* inline-block + min-block-size keeps the target size at 24px (WCAG 2.5.8). */
+  .velin-form-summary__list a {
+    display: inline-block;
+    min-block-size: 1.5rem;
+    padding-block: var(--velin-space-1);
+    color: inherit;
+    text-decoration: underline;
+  }
+
+  .velin-field-error:empty {
+    display: none;
+  }
+
   @supports selector(:user-invalid) {
     .velin-form--validated .velin-input:user-valid,
     .velin-form--validated .velin-select:user-valid,

package/src/velinstyle.css

@@ -51,6 +51,7 @@
 @import "components/alert.css";
 @import "components/badge.css";
 @import "components/table.css";
+@import "components/data-table.css";
 @import "components/tooltip.css";
 @import "components/modal.css";
 @import "components/breadcrumb.css";