@birdapi/velinstyle 1.1.0 → 1.2.1

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);
@@ -2119,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 {
@@ -2780,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;
@@ -2791,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 {
@@ -2907,6 +2974,166 @@
     font-size: var(--velin-text-sm);
   }
 
+  .velin-transparency {
+    --velin-tx-bg: color-mix(in oklab, var(--velin-color-surface) 88%, transparent);
+    --velin-tx-fg: var(--velin-color-text);
+    --velin-tx-border: var(--velin-color-border);
+    --velin-tx-accent: var(--velin-color-info, var(--velin-color-primary));
+    box-sizing: border-box;
+    z-index: var(--velin-z-overlay, 1900);
+    font-family: var(--velin-font-sans, system-ui, sans-serif);
+    font-size: var(--velin-text-xs, .75rem);
+    color: var(--velin-tx-fg);
+    line-height: 1.3;
+  }
+
+  .velin-transparency--tone-information {
+    --velin-tx-accent: var(--velin-color-info, var(--velin-color-primary));
+  }
+
+  .velin-transparency--tone-warning {
+    --velin-tx-accent: var(--velin-color-warning);
+  }
+
+  .velin-transparency--tone-neutral {
+    --velin-tx-accent: var(--velin-color-text-muted);
+  }
+
+  .velin-transparency--tone-verified {
+    --velin-tx-accent: var(--velin-color-success);
+  }
+
+  .velin-transparency--tone-generated {
+    --velin-tx-accent: var(--velin-color-primary);
+  }
+
+  .velin-transparency--tone-human {
+    --velin-tx-accent: var(--velin-color-success);
+  }
+
+  .velin-transparency--tone-mixed {
+    --velin-tx-accent: var(--velin-color-secondary, var(--velin-color-primary));
+  }
+
+  .velin-transparency--badge, .velin-transparency--icon, .velin-transparency--overlay {
+    border-radius: var(--velin-radius-full, 999px);
+    border: 1px solid color-mix(in oklab, var(--velin-tx-accent) 45%, var(--velin-tx-border));
+    background: var(--velin-tx-bg);
+    backdrop-filter: blur(8px);
+    max-width: min(16rem, 90%);
+    box-shadow: var(--velin-shadow-sm, 0 1px 2px #00000026);
+    align-items: center;
+    gap: .35rem;
+    padding: .25rem .55rem;
+    display: inline-flex;
+    position: absolute;
+  }
+
+  .velin-transparency--pos-top-right {
+    inset: .5rem .5rem auto auto;
+  }
+
+  .velin-transparency--pos-top-left {
+    inset: .5rem auto auto .5rem;
+  }
+
+  .velin-transparency--pos-bottom-right {
+    inset: auto .5rem .5rem auto;
+  }
+
+  .velin-transparency--pos-bottom-left {
+    inset: auto auto .5rem .5rem;
+  }
+
+  .velin-transparency--ribbon {
+    border-radius: var(--velin-radius-sm, 4px);
+    background: var(--velin-tx-accent);
+    color: var(--velin-color-on-primary, #fff);
+    box-shadow: var(--velin-shadow-sm, 0 1px 2px #0003);
+    padding: .3rem .85rem;
+    position: absolute;
+    top: .85rem;
+    right: -.35rem;
+    transform: rotate(8deg);
+  }
+
+  .velin-transparency--inline {
+    border-radius: var(--velin-radius-md, 6px);
+    border: 1px solid var(--velin-tx-border);
+    background: var(--velin-color-surface-dim, var(--velin-tx-bg));
+    align-items: center;
+    gap: .35rem;
+    margin-inline: .25rem;
+    padding: .15rem .45rem;
+    display: inline-flex;
+    position: static;
+  }
+
+  .velin-transparency--footer, .velin-transparency--banner {
+    border-block-start: 2px solid var(--velin-tx-accent);
+    background: color-mix(in oklab, var(--velin-tx-accent) 8%, var(--velin-color-surface));
+    border-radius: 0 0 var(--velin-radius-md, 6px) var(--velin-radius-md, 6px);
+    flex-wrap: wrap;
+    gap: .35rem .75rem;
+    width: 100%;
+    margin-block-start: .5rem;
+    padding: .55rem .75rem;
+    display: flex;
+    position: static;
+  }
+
+  .velin-transparency--panel, .velin-transparency--tooltip {
+    border-radius: var(--velin-radius-md, 6px);
+    border: 1px solid var(--velin-tx-border);
+    background: var(--velin-color-surface);
+    min-width: 12rem;
+    max-width: min(20rem, 92%);
+    box-shadow: var(--velin-shadow-md, 0 8px 24px #0000002e);
+    gap: .25rem;
+    padding: .65rem .75rem;
+    display: grid;
+    position: absolute;
+  }
+
+  .velin-transparency--panel .velin-transparency__details, .velin-transparency--tooltip .velin-transparency__details, .velin-transparency--footer .velin-transparency__details, .velin-transparency--ribbon .velin-transparency__details {
+    display: block;
+  }
+
+  .velin-transparency__label {
+    font-weight: var(--velin-weight-semibold, 600);
+    color: var(--velin-tx-accent);
+  }
+
+  .velin-transparency__details {
+    color: var(--velin-color-text-muted);
+    font-weight: var(--velin-weight-normal, 400);
+  }
+
+  .velin-transparency--icon {
+    justify-content: center;
+    min-width: 1.75rem;
+    min-height: 1.75rem;
+    padding: .25rem;
+  }
+
+  .velin-transparency--icon .velin-transparency__label {
+    clip: rect(0, 0, 0, 0);
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .velin-transparency--icon:before {
+    content: "ⓘ";
+    color: var(--velin-tx-accent);
+    font-style: normal;
+  }
+
+  [velin-transparency], [velin-disclosure] {
+    position: relative;
+  }
+
   .velin-table-wrapper {
     -webkit-overflow-scrolling: touch;
     overflow-x: auto;
@@ -5214,10 +5441,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);
   }
@@ -5234,10 +5469,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);
   }
@@ -5314,6 +5557,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);
   }
@@ -5338,6 +5621,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;
   }
@@ -5450,72 +5789,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;
   }
@@ -6075,6 +6348,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);
   }
@@ -7602,6 +7883,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;
     }
@@ -7820,6 +8121,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;
     }
@@ -8110,6 +8431,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;
     }
@@ -9815,3 +10156,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;
@@ -28,6 +29,7 @@ declare global {
     'velin-drawer': HTMLElement;
     'velin-dropdown': HTMLElement;
     'velin-email': HTMLElement;
+    'velin-file-dropzone': HTMLElement;
     'velin-form-summary': HTMLElement;
     'velin-icon': HTMLElement;
     'velin-lightbox': HTMLElement;