@birdapi/velinstyle 1.0.0 → 1.2.0

package/dist/velinstyle.css

@@ -198,6 +198,18 @@
     --velin-shadow-inner: inset 0 2px 4px oklch(0% 0 0 / .06);
   }
 
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-velin-theme="light"]) {
+      --velin-shadow-xs: 0 1px 2px oklch(0% 0 0 / .2);
+      --velin-shadow-sm: 0 1px 3px oklch(0% 0 0 / .25), 0 1px 2px oklch(0% 0 0 / .2);
+      --velin-shadow-md: 0 4px 6px oklch(0% 0 0 / .3), 0 2px 4px oklch(0% 0 0 / .2);
+      --velin-shadow-lg: 0 10px 15px oklch(0% 0 0 / .35), 0 4px 6px oklch(0% 0 0 / .2);
+      --velin-shadow-xl: 0 20px 25px oklch(0% 0 0 / .4), 0 8px 10px oklch(0% 0 0 / .2);
+      --velin-shadow-2xl: 0 25px 50px oklch(0% 0 0 / .5);
+      --velin-shadow-inner: inset 0 2px 4px oklch(0% 0 0 / .3);
+    }
+  }
+
   [data-velin-theme="dark"] {
     --velin-shadow-xs: 0 1px 2px oklch(0% 0 0 / .2);
     --velin-shadow-sm: 0 1px 3px oklch(0% 0 0 / .25), 0 1px 2px oklch(0% 0 0 / .2);
@@ -427,6 +439,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;
@@ -2114,6 +2131,44 @@
     background: var(--velin-color-surface-bright);
     box-shadow: var(--velin-shadow-md);
   }
+
+  .velin-app-shell {
+    min-block-size: 100dvh;
+    display: flex;
+  }
+
+  .velin-app-shell__nav {
+    flex-shrink: 0;
+    inline-size: 16rem;
+    min-inline-size: 0;
+    overflow-x: auto;
+  }
+
+  .velin-app-shell__body {
+    flex-direction: column;
+    flex: 1;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .velin-app-shell__content {
+    flex: 1;
+  }
+
+  .velin-toc {
+    flex-shrink: 0;
+    inline-size: 10rem;
+  }
+
+  .velin-docs-nav {
+    flex-shrink: 0;
+    inline-size: 12rem;
+  }
+
+  .velin-docs-main {
+    flex: 1;
+    min-inline-size: 16rem;
+  }
 }
 
 @layer components {
@@ -2775,9 +2830,16 @@
     color: var(--velin-color-text);
     font-size: var(--velin-text-base);
     line-height: var(--velin-leading-normal);
+    overflow-wrap: break-word;
+    min-inline-size: 0;
+    max-inline-size: 100%;
     display: flex;
   }
 
+  .velin-alert:not(:has(.velin-alert__icon, .velin-alert__close, .velin-alert__content)) {
+    display: block;
+  }
+
   .velin-alert__icon {
     flex-shrink: 0;
     block-size: 1.5rem;
@@ -2786,7 +2848,17 @@
   }
 
   .velin-alert__content {
-    flex-grow: 1;
+    overflow-wrap: break-word;
+    flex: auto;
+    min-inline-size: 0;
+  }
+
+  .velin-alert__content > p {
+    margin-block: 0 var(--velin-space-2);
+  }
+
+  .velin-alert__content > p:last-child {
+    margin-block-end: 0;
   }
 
   .velin-alert__title {
@@ -3014,6 +3086,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;
@@ -4502,6 +4660,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);
@@ -5085,10 +5281,18 @@
     margin-block-start: var(--velin-space-0);
   }
 
+  .velin-mbs-1 {
+    margin-block-start: var(--velin-space-1);
+  }
+
   .velin-mbs-2 {
     margin-block-start: var(--velin-space-2);
   }
 
+  .velin-mbs-3 {
+    margin-block-start: var(--velin-space-3);
+  }
+
   .velin-mbs-4 {
     margin-block-start: var(--velin-space-4);
   }
@@ -5105,10 +5309,18 @@
     margin-block-end: var(--velin-space-0);
   }
 
+  .velin-mbe-1 {
+    margin-block-end: var(--velin-space-1);
+  }
+
   .velin-mbe-2 {
     margin-block-end: var(--velin-space-2);
   }
 
+  .velin-mbe-3 {
+    margin-block-end: var(--velin-space-3);
+  }
+
   .velin-mbe-4 {
     margin-block-end: var(--velin-space-4);
   }
@@ -5185,6 +5397,46 @@
     padding-block: var(--velin-space-8);
   }
 
+  .velin-pb-10 {
+    padding-block: var(--velin-space-10);
+  }
+
+  .velin-pb-12 {
+    padding-block: var(--velin-space-12);
+  }
+
+  .velin-py-0 {
+    padding-block: var(--velin-space-0);
+  }
+
+  .velin-py-2 {
+    padding-block: var(--velin-space-2);
+  }
+
+  .velin-py-3 {
+    padding-block: var(--velin-space-3);
+  }
+
+  .velin-py-4 {
+    padding-block: var(--velin-space-4);
+  }
+
+  .velin-py-6 {
+    padding-block: var(--velin-space-6);
+  }
+
+  .velin-py-8 {
+    padding-block: var(--velin-space-8);
+  }
+
+  .velin-py-10 {
+    padding-block: var(--velin-space-10);
+  }
+
+  .velin-py-12 {
+    padding-block: var(--velin-space-12);
+  }
+
   .velin-pi-0 {
     padding-inline: var(--velin-space-0);
   }
@@ -5209,6 +5461,62 @@
     padding-inline: var(--velin-space-8);
   }
 
+  .velin-pi-10 {
+    padding-inline: var(--velin-space-10);
+  }
+
+  .velin-pi-12 {
+    padding-inline: var(--velin-space-12);
+  }
+
+  .velin-pbs-0 {
+    padding-block-start: var(--velin-space-0);
+  }
+
+  .velin-pbs-1 {
+    padding-block-start: var(--velin-space-1);
+  }
+
+  .velin-pbs-2 {
+    padding-block-start: var(--velin-space-2);
+  }
+
+  .velin-pbs-3 {
+    padding-block-start: var(--velin-space-3);
+  }
+
+  .velin-pbs-4 {
+    padding-block-start: var(--velin-space-4);
+  }
+
+  .velin-pbs-6 {
+    padding-block-start: var(--velin-space-6);
+  }
+
+  .velin-pbe-0 {
+    padding-block-end: var(--velin-space-0);
+  }
+
+  .velin-pbe-1 {
+    padding-block-end: var(--velin-space-1);
+  }
+
+  .velin-pbe-2 {
+    padding-block-end: var(--velin-space-2);
+  }
+
+  .velin-pbe-3 {
+    padding-block-end: var(--velin-space-3);
+  }
+
+  .velin-pbe-4 {
+    padding-block-end: var(--velin-space-4);
+  }
+
+  .velin-pbe-6 {
+    padding-block-end: var(--velin-space-6);
+  }
+
   .velin-gap-0 {
     gap: 0;
   }
@@ -5321,72 +5629,6 @@
     opacity: 1;
   }
 
-  @media (width >= 36rem) {
-    .velin-sm-block {
-      display: block;
-    }
-
-    .velin-sm-flex {
-      display: flex;
-    }
-
-    .velin-sm-grid {
-      display: grid;
-    }
-
-    .velin-sm-hidden {
-      display: none;
-    }
-
-    .velin-sm-inline {
-      display: inline;
-    }
-  }
-
-  @media (width >= 48rem) {
-    .velin-md-block {
-      display: block;
-    }
-
-    .velin-md-flex {
-      display: flex;
-    }
-
-    .velin-md-grid {
-      display: grid;
-    }
-
-    .velin-md-hidden {
-      display: none;
-    }
-
-    .velin-md-inline {
-      display: inline;
-    }
-  }
-
-  @media (width >= 62rem) {
-    .velin-lg-block {
-      display: block;
-    }
-
-    .velin-lg-flex {
-      display: flex;
-    }
-
-    .velin-lg-grid {
-      display: grid;
-    }
-
-    .velin-lg-hidden {
-      display: none;
-    }
-
-    .velin-lg-inline {
-      display: inline;
-    }
-  }
-
   .velin-columns-1 {
     columns: 1;
   }
@@ -5946,6 +6188,14 @@
     border-block-end: 1px solid var(--velin-color-border);
   }
 
+  .velin-border-inline-end {
+    border-inline-end: 1px solid var(--velin-color-border);
+  }
+
+  .velin-border-inline-start {
+    border-inline-start: 1px solid var(--velin-color-border);
+  }
+
   .velin-border-primary {
     border-color: var(--velin-color-primary);
   }
@@ -7473,6 +7723,26 @@
   }
 
   @media (width >= 36rem) {
+    .velin-sm-block {
+      display: block;
+    }
+
+    .velin-sm-flex {
+      display: flex;
+    }
+
+    .velin-sm-grid {
+      display: grid;
+    }
+
+    .velin-sm-hidden {
+      display: none;
+    }
+
+    .velin-sm-inline {
+      display: inline;
+    }
+
     .velin-sm-inline-block {
       display: inline-block;
     }
@@ -7691,6 +7961,26 @@
   }
 
   @media (width >= 48rem) {
+    .velin-md-block {
+      display: block;
+    }
+
+    .velin-md-flex {
+      display: flex;
+    }
+
+    .velin-md-grid {
+      display: grid;
+    }
+
+    .velin-md-hidden {
+      display: none;
+    }
+
+    .velin-md-inline {
+      display: inline;
+    }
+
     .velin-md-inline-block {
       display: inline-block;
     }
@@ -7981,6 +8271,26 @@
   }
 
   @media (width >= 62rem) {
+    .velin-lg-block {
+      display: block;
+    }
+
+    .velin-lg-flex {
+      display: flex;
+    }
+
+    .velin-lg-grid {
+      display: grid;
+    }
+
+    .velin-lg-hidden {
+      display: none;
+    }
+
+    .velin-lg-inline {
+      display: inline;
+    }
+
     .velin-lg-inline-block {
       display: inline-block;
     }
@@ -9686,3 +9996,7 @@
 }
 
 @layer themes;
+
+velin-calendar, velin-file-dropzone {
+  display: block;
+}

package/dist/velinstyle.d.ts

@@ -15,6 +15,7 @@ declare global {
     'velin-accordion': HTMLElement;
     'velin-announcer': HTMLElement;
     'velin-bottom-nav': HTMLElement;
+    'velin-calendar': HTMLElement;
     'velin-carousel': HTMLElement;
     'velin-code-block': HTMLElement;
     'velin-collapse': HTMLElement;
@@ -23,10 +24,13 @@ 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-file-dropzone': HTMLElement;
+    'velin-form-summary': HTMLElement;
     'velin-icon': HTMLElement;
     'velin-lightbox': HTMLElement;
     'velin-live-dot': HTMLElement;