@birdapi/velinstyle 0.7.0 → 0.9.0

package/src/components/highlight.css

@@ -0,0 +1,182 @@
+@layer components {
+  pre.velin-syntax-pending code,
+  code.velin-syntax-pending {
+    opacity: 0;
+  }
+
+  pre.velin-syntax-ready code,
+  code.velin-syntax-ready {
+    opacity: 1;
+    transition: opacity var(--velin-duration-normal, 250ms) var(--velin-ease-out, ease-out);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    pre.velin-syntax-ready code,
+    code.velin-syntax-ready {
+      transition: none;
+    }
+  }
+
+  .velin-token {
+    font-family: inherit;
+  }
+
+  .velin-token--keyword {
+    color: oklch(45% 0.2 265);
+  }
+
+  .velin-token--string {
+    color: oklch(42% 0.14 145);
+  }
+
+  .velin-token--comment {
+    color: oklch(55% 0.02 265);
+    font-style: italic;
+  }
+
+  .velin-token--number {
+    color: oklch(48% 0.16 55);
+  }
+
+  .velin-token--operator {
+    color: oklch(50% 0.18 25);
+  }
+
+  .velin-token--punctuation {
+    color: oklch(52% 0.02 265);
+  }
+
+  .velin-token--identifier {
+    color: oklch(38% 0.04 265);
+  }
+
+  .velin-token--tag {
+    color: oklch(48% 0.18 25);
+  }
+
+  .velin-token--attr-name {
+    color: oklch(45% 0.16 265);
+  }
+
+  .velin-token--attr-value {
+    color: oklch(42% 0.14 145);
+  }
+
+  .velin-token--builtin {
+    color: oklch(46% 0.17 310);
+  }
+
+  .velin-token--regex {
+    color: oklch(50% 0.16 55);
+  }
+
+  @supports (color: color(display-p3 1 1 1)) {
+    .velin-token--keyword {
+      color: color(display-p3 0.2 0.35 0.85);
+    }
+
+    .velin-token--string {
+      color: color(display-p3 0.15 0.55 0.35);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-velin-theme='light']) .velin-token--keyword {
+      color: oklch(78% 0.14 285);
+    }
+  }
+
+  [data-velin-theme='dark'] .velin-token--keyword {
+    color: oklch(78% 0.14 285);
+  }
+
+  [data-velin-theme='dark'] .velin-token--string {
+    color: oklch(78% 0.12 145);
+  }
+
+  [data-velin-theme='dark'] .velin-token--comment {
+    color: oklch(62% 0.03 285);
+  }
+
+  [data-velin-theme='dark'] .velin-token--number {
+    color: oklch(80% 0.12 75);
+  }
+
+  [data-velin-theme='dark'] .velin-token--operator {
+    color: oklch(78% 0.14 25);
+  }
+
+  [data-velin-theme='dark'] .velin-token--tag {
+    color: oklch(78% 0.14 25);
+  }
+
+  [data-velin-theme='dark'] .velin-token--attr-name {
+    color: oklch(76% 0.12 285);
+  }
+
+  [data-velin-theme='dark'] .velin-token--identifier {
+    color: oklch(88% 0.02 285);
+  }
+
+  .velin-code-block__line--highlight {
+    background: color-mix(in oklch, var(--velin-color-primary, oklch(55% 0.2 265)) 18%, transparent);
+    display: block;
+    margin-inline: calc(-1 * var(--velin-space-4, 1rem));
+    padding-inline: var(--velin-space-4, 1rem);
+  }
+
+  velin-code-block {
+    display: block;
+    position: relative;
+  }
+
+  velin-code-block[data-collapsed] pre {
+    max-height: 12rem;
+    overflow: hidden;
+  }
+
+  velin-code-block .velin-code-block__gutter {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0;
+  }
+
+  velin-code-block .velin-code-block__line-numbers {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    align-items: flex-end;
+    padding: var(--velin-space-4);
+    padding-inline-end: var(--velin-space-2);
+    text-align: end;
+    user-select: none;
+    color: var(--velin-color-text-muted);
+    font-family: var(--velin-font-mono, ui-monospace, monospace);
+    font-size: var(--velin-text-sm, 0.875rem);
+    line-height: 1.55;
+    border-inline-end: 1px solid var(--velin-color-border);
+  }
+
+  velin-code-block .velin-code-block__line-numbers > span {
+    display: block;
+    min-height: 1.55em;
+    line-height: 1.55;
+  }
+
+  velin-code-block .velin-code-block__gutter pre,
+  velin-code-block .velin-code-block__gutter pre code {
+    margin: 0;
+    white-space: pre;
+    line-height: 1.55;
+    tab-size: 2;
+  }
+
+  velin-code-block .velin-code-block__toolbar {
+    position: absolute;
+    inset-block-start: var(--velin-space-2);
+    inset-inline-end: var(--velin-space-2);
+    display: flex;
+    gap: var(--velin-space-2);
+    z-index: 1;
+  }
+}

package/src/components/input-group.css

@@ -81,8 +81,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 {

package/src/components/nav.css

@@ -1,151 +1,151 @@
-@layer components {
-  .velin-nav {
-    display: flex;
-    align-items: center;
-    gap: var(--velin-space-2);
-    padding-block: var(--velin-space-3);
-    padding-inline: var(--velin-space-4);
-    background-color: var(--velin-color-surface-bright);
-    border-block-end: 1px solid var(--velin-color-border);
-  }
-
-  .velin-nav__brand {
-    font-size: var(--velin-text-lg);
-    font-weight: var(--velin-weight-bold);
-    color: var(--velin-color-text);
-    text-decoration: none;
-    margin-inline-end: auto;
-  }
-
-  .velin-nav__list {
-    display: flex;
-    align-items: center;
-    gap: var(--velin-space-1);
-    list-style: none;
-  }
-
-  .velin-nav__link {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--velin-space-1);
-    min-block-size: 2.75rem; /* 44px touch target */
-    padding-block: var(--velin-space-2);
-    padding-inline: var(--velin-space-3);
-    font-size: var(--velin-text-base);
-    font-weight: var(--velin-weight-medium);
-    color: var(--velin-color-text-muted);
-    text-decoration: none;
-    border-radius: var(--velin-radius-md);
-    transition: var(--velin-transition-colors);
-  }
-
-  .velin-nav__link:hover {
-    color: var(--velin-color-text);
-    background-color: var(--velin-color-surface-dim);
-  }
-
-  .velin-nav__link[aria-current="page"],
-  .velin-nav__link--active {
-    color: var(--velin-color-primary);
-    font-weight: var(--velin-weight-semibold);
-  }
-
-  /* Toggle button for mobile */
-  .velin-nav__toggle {
-    display: none;
-    min-block-size: 2.75rem;
-    min-inline-size: 2.75rem;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    color: var(--velin-color-text);
-    cursor: pointer;
-    border-radius: var(--velin-radius-md);
-  }
-
-  .velin-nav__toggle:hover {
-    background-color: var(--velin-color-surface-dim);
-  }
-
-  /* Mobile: stack nav vertically */
-  @media (max-width: 47.999rem) {
-    .velin-nav {
-      flex-wrap: wrap;
-    }
-
-    .velin-nav__toggle {
-      display: inline-flex;
-    }
-
-    .velin-nav__list {
-      flex-direction: column;
-      align-items: stretch;
-      inline-size: 100%;
-      display: none;
-    }
-
-    .velin-nav__list[data-velin-open] {
-      display: flex;
-    }
-
-    .velin-nav__link {
-      inline-size: 100%;
-    }
-  }
-
-  /* Vertical nav variant */
-  .velin-nav--vertical {
-    flex-direction: column;
-    align-items: stretch;
-    border-block-end: none;
-    border-inline-end: 1px solid var(--velin-color-border);
-  }
-
-  .velin-nav--vertical .velin-nav__brand {
-    margin-inline-end: 0;
-    margin-block-end: var(--velin-space-4);
-  }
-
-  .velin-nav--vertical .velin-nav__list {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  /* Mega menu */
-  .velin-nav__mega {
-    position: absolute;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    inset-block-start: 100%;
-    z-index: var(--velin-z-dropdown);
-    background: var(--velin-color-surface-bright);
-    border: 1px solid var(--velin-color-border);
-    border-radius: var(--velin-radius-lg);
-    box-shadow: var(--velin-shadow-lg);
-    padding: var(--velin-space-6);
-    display: none;
-  }
-
-  .velin-nav__item:hover > .velin-nav__mega,
-  .velin-nav__item:focus-within > .velin-nav__mega {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-    gap: var(--velin-space-6);
-  }
-
-  .velin-nav__mega-section {
-    display: flex;
-    flex-direction: column;
-    gap: var(--velin-space-2);
-  }
-
-  .velin-nav__mega-title {
-    font-size: var(--velin-text-xs);
-    font-weight: var(--velin-weight-bold);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--velin-color-text-muted);
-    margin-block-end: var(--velin-space-2);
-  }
-}
+@layer components {
+  .velin-nav {
+    display: flex;
+    align-items: center;
+    gap: var(--velin-space-2);
+    padding-block: var(--velin-space-3);
+    padding-inline: var(--velin-space-4);
+    background-color: var(--velin-color-surface-bright);
+    border-block-end: 1px solid var(--velin-color-border);
+  }
+
+  .velin-nav__brand {
+    font-size: var(--velin-text-lg);
+    font-weight: var(--velin-weight-bold);
+    color: var(--velin-color-text);
+    text-decoration: none;
+    margin-inline-end: auto;
+  }
+
+  .velin-nav__list {
+    display: flex;
+    align-items: center;
+    gap: var(--velin-space-1);
+    list-style: none;
+  }
+
+  .velin-nav__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--velin-space-1);
+    min-block-size: 2.75rem; /* 44px touch target */
+    padding-block: var(--velin-space-2);
+    padding-inline: var(--velin-space-3);
+    font-size: var(--velin-text-base);
+    font-weight: var(--velin-weight-medium);
+    color: var(--velin-color-text-muted);
+    text-decoration: none;
+    border-radius: var(--velin-radius-md);
+    transition: var(--velin-transition-colors);
+  }
+
+  .velin-nav__link:hover {
+    color: var(--velin-color-text);
+    background-color: var(--velin-color-surface-dim);
+  }
+
+  .velin-nav__link[aria-current="page"],
+  .velin-nav__link--active {
+    color: var(--velin-color-primary);
+    font-weight: var(--velin-weight-semibold);
+  }
+
+  /* Toggle button for mobile */
+  .velin-nav__toggle {
+    display: none;
+    min-block-size: 2.75rem;
+    min-inline-size: 2.75rem;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: var(--velin-color-text);
+    cursor: pointer;
+    border-radius: var(--velin-radius-md);
+  }
+
+  .velin-nav__toggle:hover {
+    background-color: var(--velin-color-surface-dim);
+  }
+
+  /* Mobile: stack nav vertically */
+  /* Aligns with --velin-bp-md (48rem) used in safe-area utilities */
+  @media (width <= 47.999rem) {
+    .velin-nav {
+      flex-wrap: wrap;
+    }
+
+    .velin-nav__toggle {
+      display: inline-flex;
+    }
+
+    .velin-nav__list {
+      flex-direction: column;
+      align-items: stretch;
+      inline-size: 100%;
+      display: none;
+    }
+
+    .velin-nav__list[data-velin-open] {
+      display: flex;
+    }
+
+    .velin-nav__link {
+      inline-size: 100%;
+    }
+  }
+
+  /* Vertical nav variant */
+  .velin-nav--vertical {
+    flex-direction: column;
+    align-items: stretch;
+    border-block-end: none;
+    border-inline-end: 1px solid var(--velin-color-border);
+  }
+
+  .velin-nav--vertical .velin-nav__brand {
+    margin-inline-end: 0;
+    margin-block-end: var(--velin-space-4);
+  }
+
+  .velin-nav--vertical .velin-nav__list {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* Mega menu */
+  .velin-nav__mega {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 100%;
+    z-index: var(--velin-z-dropdown);
+    background: var(--velin-color-surface-bright);
+    border: 1px solid var(--velin-color-border);
+    border-radius: var(--velin-radius-lg);
+    box-shadow: var(--velin-shadow-lg);
+    padding: var(--velin-space-6);
+    display: none;
+  }
+
+  .velin-nav__item:hover > .velin-nav__mega,
+  .velin-nav__item:focus-within > .velin-nav__mega {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    gap: var(--velin-space-6);
+  }
+
+  .velin-nav__mega-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--velin-space-2);
+  }
+
+  .velin-nav__mega-title {
+    font-size: var(--velin-text-xs);
+    font-weight: var(--velin-weight-bold);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--velin-color-text-muted);
+    margin-block-end: var(--velin-space-2);
+  }
+}

package/src/components/search.css

@@ -0,0 +1,95 @@
+@layer components {
+  .velin-search {
+    position: relative;
+    inline-size: 100%;
+  }
+
+  .velin-search__input {
+    inline-size: 100%;
+    padding: var(--velin-space-2) var(--velin-space-3);
+    border: 1px solid var(--velin-color-border);
+    border-radius: var(--velin-radius-md);
+    background: var(--velin-color-surface);
+    color: var(--velin-color-text);
+  }
+
+  .velin-search__results {
+    position: absolute;
+    inset-block-start: calc(100% + var(--velin-space-1));
+    inset-inline: 0;
+    z-index: var(--velin-z-dropdown, 100);
+    max-block-size: 20rem;
+    overflow: auto;
+    border: 1px solid var(--velin-color-border);
+    border-radius: var(--velin-radius-md);
+    background: var(--velin-color-surface);
+    box-shadow: var(--velin-shadow-lg);
+    opacity: 0;
+    transform: translateY(-0.25rem);
+    transition:
+      opacity var(--velin-duration-fast, 150ms) ease,
+      transform var(--velin-duration-fast, 150ms) ease;
+  }
+
+  .velin-search__results--open {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .velin-search__group-label {
+    padding: var(--velin-space-2) var(--velin-space-3);
+    font-size: var(--velin-text-xs, 0.75rem);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--velin-color-text-muted);
+    border-block-end: 1px solid var(--velin-color-border);
+  }
+
+  .velin-search__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--velin-space-1);
+    padding: var(--velin-space-2) var(--velin-space-3);
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .velin-search__item:hover,
+  .velin-search__item--active {
+    background: var(--velin-color-surface-hover, color-mix(in oklch, var(--velin-color-primary) 12%, transparent));
+  }
+
+  .velin-search__title {
+    font-weight: 600;
+  }
+
+  .velin-search__excerpt {
+    font-size: var(--velin-text-sm, 0.875rem);
+    color: var(--velin-color-text-muted);
+  }
+
+  .velin-search-hit {
+    background: color-mix(in oklch, var(--velin-color-primary) 35%, transparent);
+    border-radius: 2px;
+    padding-inline: 1px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .velin-search__results {
+      transition: none;
+    }
+  }
+
+  @media (width <= 640px) {
+    .velin-search {
+      min-inline-size: 0;
+    }
+
+    .velin-search__results {
+      inset-inline: 0;
+      max-inline-size: min(100vw, 100%);
+      box-sizing: border-box;
+    }
+  }
+}

package/src/components/stepper.css

@@ -107,10 +107,8 @@
   }
 
   .velin-stepper--vertical .velin-stepper__step + .velin-stepper__step::before {
-    inset-inline-start: 1.125rem;
-    inset-inline-end: auto;
-    inset-block-start: auto;
-    inset-block-end: calc(100% - 0.5rem);
+    inset-inline: 1.125rem auto;
+    inset-block: auto calc(100% - 0.5rem);
     inline-size: 2px;
     block-size: calc(100% - 2.5rem);
   }

package/src/components/timeline.css

@@ -8,8 +8,7 @@
     content: "";
     position: absolute;
     inset-inline-start: 0.5rem;
-    inset-block-start: var(--velin-space-2);
-    inset-block-end: var(--velin-space-2);
+    inset-block: var(--velin-space-2) var(--velin-space-2);
     inline-size: 2px;
     background: var(--velin-color-border);
   }

package/src/components/tooltip.css

@@ -39,13 +39,11 @@
 
   /* Placement modifiers */
   .velin-tooltip--bottom .velin-tooltip__content {
-    inset-block-end: auto;
-    inset-block-start: calc(100% + var(--velin-space-2));
+    inset-block: calc(100% + var(--velin-space-2)) auto;
   }
 
   .velin-tooltip--bottom .velin-tooltip__content::after {
-    inset-block-start: auto;
-    inset-block-end: 100%;
+    inset-block: auto 100%;
     border-block-start-color: transparent;
     border-block-end-color: var(--velin-color-text);
   }

package/src/layout/container.css

@@ -7,32 +7,32 @@
     container-name: velin;
   }
 
-  @media (min-width: 36rem) {
+  @media (width >= 36rem) {
     .velin-container {
       max-inline-size: 33rem;
       padding-inline: var(--velin-space-6);
     }
   }
 
-  @media (min-width: 48rem) {
+  @media (width >= 48rem) {
     .velin-container {
       max-inline-size: 45rem;
     }
   }
 
-  @media (min-width: 62rem) {
+  @media (width >= 62rem) {
     .velin-container {
       max-inline-size: 60rem;
     }
   }
 
-  @media (min-width: 80rem) {
+  @media (width >= 80rem) {
     .velin-container {
       max-inline-size: 76rem;
     }
   }
 
-  @media (min-width: 96rem) {
+  @media (width >= 96rem) {
     .velin-container {
       max-inline-size: 90rem;
     }