@birdapi/velinstyle 0.9.0 → 1.1.0

package/dist/velinstyle.css

@@ -427,6 +427,11 @@
     display: contents;
   }
 
+  velin-data-table:not(:defined), velin-form-summary:not(:defined) {
+    contain: layout style;
+    display: block;
+  }
+
   :focus-visible {
     outline: 3px solid var(--velin-color-focus);
     outline-offset: 2px;
@@ -3014,6 +3019,92 @@
     }
   }
 
+  .velin-data-table {
+    display: block;
+  }
+
+  .velin-data-table tr[hidden] {
+    display: none;
+  }
+
+  .velin-data-table__th {
+    padding: 0;
+  }
+
+  .velin-data-table__sort {
+    align-items: center;
+    gap: var(--velin-space-2);
+    min-block-size: 2.75rem;
+    inline-size: 100%;
+    padding: var(--velin-space-3) var(--velin-space-4);
+    font: inherit;
+    font-weight: var(--velin-weight-semibold);
+    color: inherit;
+    text-align: inherit;
+    cursor: pointer;
+    background: none;
+    border: none;
+    display: flex;
+  }
+
+  .velin-data-table__sort:hover {
+    background-color: var(--velin-color-surface-dim);
+  }
+
+  .velin-data-table__sort-icon {
+    inline-size: .75rem;
+    color: var(--velin-color-text-muted);
+    flex-shrink: 0;
+  }
+
+  .velin-data-table__sort-icon:after {
+    content: "↕";
+  }
+
+  [aria-sort="ascending"] .velin-data-table__sort-icon:after {
+    content: "↑";
+  }
+
+  [aria-sort="descending"] .velin-data-table__sort-icon:after {
+    content: "↓";
+  }
+
+  [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 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--velin-space-3);
+    flex-wrap: wrap;
+    margin-block-start: var(--velin-space-4);
+    display: flex;
+  }
+
+  .velin-data-table__page-status {
+    color: var(--velin-color-text-muted);
+    font-size: var(--velin-text-sm);
+    margin: 0;
+  }
+
+  @media (forced-colors: active) {
+    .velin-data-table__sort:hover {
+      color: highlighttext;
+      background-color: highlight;
+    }
+
+    .velin-data-table__sort-icon {
+      color: canvastext;
+    }
+  }
+
   .velin-tooltip {
     display: inline-block;
     position: relative;
@@ -3052,8 +3143,7 @@
   }
 
   .velin-tooltip--bottom .velin-tooltip__content {
-    inset-block-start: calc(100% + var(--velin-space-2));
-    inset-block-end: auto;
+    inset-block: calc(100% + var(--velin-space-2)) auto;
   }
 
   .velin-tooltip--bottom .velin-tooltip__content:after {
@@ -4059,12 +4149,11 @@
 
   .velin-timeline:before {
     content: "";
+    inset-inline-start: .5rem;
+    inset-block: var(--velin-space-2) var(--velin-space-2);
     background: var(--velin-color-border);
     inline-size: 2px;
     position: absolute;
-    inset-block-start: var(--velin-space-2);
-    inset-block-end: var(--velin-space-2);
-    inset-inline-start: .5rem;
   }
 
   .velin-timeline__item {
@@ -4422,8 +4511,7 @@
   }
 
   .velin-float-label > .velin-input, .velin-float-label > .velin-select, .velin-float-label > .velin-textarea {
-    padding-block-start: var(--velin-space-5);
-    padding-block-end: var(--velin-space-1);
+    padding-block: var(--velin-space-5) var(--velin-space-1);
   }
 
   .velin-float-label > .velin-label {
@@ -4505,6 +4593,44 @@
     overflow: visible;
   }
 
+  .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);
+  }
+
+  .velin-form-summary__list a {
+    min-block-size: 1.5rem;
+    padding-block: var(--velin-space-1);
+    color: inherit;
+    text-decoration: underline;
+    display: inline-block;
+  }
+
+  .velin-field-error:empty {
+    display: none;
+  }
+
   @supports selector(:user-invalid) {
     .velin-form--validated .velin-input:user-valid, .velin-form--validated .velin-select:user-valid, .velin-form--validated .velin-textarea:user-valid {
       border-color: var(--velin-color-success);
@@ -5562,6 +5688,10 @@
     font-variant-numeric: tabular-nums;
   }
 
+  .velin-text-pretty {
+    text-wrap: pretty;
+  }
+
   .velin-text-start {
     text-align: start;
   }
@@ -5686,10 +5816,6 @@
     text-wrap: balance;
   }
 
-  .velin-text-pretty {
-    text-wrap: pretty;
-  }
-
   .velin-text-nowrap {
     text-wrap: nowrap;
   }
@@ -6726,7 +6852,7 @@
   }
 
   @keyframes velin-flip {
-    from {
+    0% {
       opacity: 0;
       transform: perspective(400px) rotateY(90deg);
     }
@@ -6739,7 +6865,7 @@
       transform: perspective(400px) rotateY(15deg);
     }
 
-    to {
+    100% {
       opacity: 1;
       transform: perspective(400px) rotateY(0);
     }
@@ -8454,15 +8580,11 @@
   }
 
   .velin-divide-y-2 > * + * {
-    border-block-start-style: solid;
-    border-block-start-width: 2px;
-    border-block-start-color: var(--velin-color-border);
+    border-block-start: 2px solid var(--velin-color-border);
   }
 
   .velin-divide-x-2 > * + * {
-    border-inline-start-style: solid;
-    border-inline-start-width: 2px;
-    border-inline-start-color: var(--velin-color-border);
+    border-inline-start: 2px solid var(--velin-color-border);
   }
 
   .velin-divide-primary > * + * {

package/dist/velinstyle.d.ts

@@ -23,10 +23,12 @@ declare global {
     'velin-copy': HTMLElement;
     'velin-countdown': HTMLElement;
     'velin-counter': HTMLElement;
+    'velin-data-table': HTMLElement;
     'velin-dialog': HTMLElement;
     'velin-drawer': HTMLElement;
     'velin-dropdown': HTMLElement;
     'velin-email': HTMLElement;
+    'velin-form-summary': HTMLElement;
     'velin-icon': HTMLElement;
     'velin-lightbox': HTMLElement;
     'velin-live-dot': HTMLElement;