@getvitops/generator 0.1.0

package/assets/css/patterns/anchor-link.css

@@ -0,0 +1,66 @@
+/**
+ * Anchor Link — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Anchor link — explicit .link + mailto/tel/external affordances ───────── */
+.link {
+  --_link-decoration-color: var(--link-decoration-color, currentColor);
+
+  color: var(--link-color, currentColor);
+  text-decoration: var(--link-decoration, underline);
+  text-decoration-color: var(--_link-decoration-color);
+  text-underline-offset: 0.2em;
+  transition:
+    color 0.2s ease,
+    text-decoration-color 0.2s ease;
+
+  &:hover,
+  &:focus-visible {
+    --_link-decoration-color: var(--link-hover-decoration-color, transparent);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--link-focus-color, currentColor);
+    outline-offset: 2px;
+  }
+}
+
+a[href^='mailto:'].link--icon::before {
+  content: '';
+  display: inline-block;
+  inline-size: 1em;
+  block-size: 1em;
+  margin-inline-end: 0.25em;
+  vertical-align: -0.125em;
+  background-color: currentColor;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+}
+
+a[href^='tel:'].link--icon::before {
+  content: '';
+  display: inline-block;
+  inline-size: 1em;
+  block-size: 1em;
+  margin-inline-end: 0.25em;
+  vertical-align: -0.125em;
+  background-color: currentColor;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+}
+
+a[target='_blank'].link--external::after {
+  content: '';
+  display: inline-block;
+  inline-size: 0.75em;
+  block-size: 0.75em;
+  margin-inline-start: 0.25em;
+  vertical-align: baseline;
+  background-color: currentColor;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+}

package/assets/css/patterns/banner.css

@@ -0,0 +1,64 @@
+/**
+ * Banner — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Banner — full-width announcement; colour via bg-/text- utilities ─────── */
+.banner {
+  --_p: var(--p-banner, var(--p-banner-group, var(--p-default)));
+  --_br: var(--br-banner, var(--br-banner-group, var(--br-default)));
+  --_b: var(--b-banner, var(--b-banner-group, var(--b-default)));
+
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--_p);
+  border: var(--_b);
+  border-radius: var(--_br);
+
+  &.banner--dismissible {
+    padding-inline-end: calc(1rem + 2.5rem);
+  }
+
+  .banner__close {
+    position: absolute;
+    inset-inline-end: 1rem;
+    inset-block: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    background: transparent;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+
+    &:hover,
+    &:focus-visible {
+      opacity: 1;
+    }
+  }
+
+  &.banner--sticky {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--z-tier-sticky);
+  }
+
+  .banner__content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--banner-gap, 1rem);
+  }
+
+  .banner__action {
+    flex-shrink: 0;
+  }
+}

package/assets/css/patterns/carousel.css

@@ -0,0 +1,269 @@
+/**
+ * Carousel — CSS-only scroll-snap carousel migrated from old-css-lib. Uses
+ * ::scroll-button(), ::scroll-marker-group, ::column, scroll-state() and
+ * anchor positioning (all polyfilled). Fully operable as a scroll-snap strip
+ * without JS; the Lit component adds autoplay + any marker fallback.
+ */
+
+.carousel {
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+  scroll-snap-type: x mandatory;
+  scroll-padding: var(--carousel-scroll-padding, 1rem);
+  padding: var(--carousel-padding, 1rem);
+  max-inline-size: 100%;
+  anchor-name: --carousel;
+  anchor-scope: --carousel;
+
+  /* Non-paged (default) — grid layout */
+  &:not(.carousel--auto-pages) {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: var(--carousel-slide-size, 100%);
+    gap: var(--carousel-gap, 1rem);
+
+    > * {
+      scroll-snap-align: center;
+    }
+
+    > [part='autoplay'] {
+      scroll-snap-align: unset;
+    }
+  }
+
+  /* Paged — CSS columns */
+  &.carousel--auto-pages {
+    columns: var(--carousel-columns, 1);
+    text-align: center;
+
+    > * {
+      break-inside: avoid;
+      display: inline-grid;
+    }
+
+    &::column {
+      scroll-snap-align: center;
+    }
+  }
+
+  /* Scroll buttons — anchor-positioned */
+  &.carousel--scroll-buttons {
+    &::scroll-button(*) {
+      position: fixed;
+      position-anchor: --carousel;
+      position-visibility: always;
+      cursor: pointer;
+      font-size: 1.5rem;
+      inline-size: 44px;
+      aspect-ratio: 1;
+      display: flex;
+      place-items: center;
+      place-content: center;
+      border: none;
+      border-radius: 50%;
+      color: var(--carousel-button-color, currentColor);
+      background: var(--color-surface-xl);
+      opacity: 0.9;
+      transition:
+        opacity 0.2s ease,
+        background 0.2s ease;
+    }
+
+    &::scroll-button(*):hover {
+      opacity: 1;
+      background: var(--color-surface-l);
+    }
+
+    &::scroll-button(*):focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+    &::scroll-button(*):disabled {
+      cursor: not-allowed;
+      opacity: 0.2;
+    }
+
+    &::scroll-button(left) {
+      position-area: inline-start center;
+      content: '\2190' / 'Previous';
+    }
+
+    &::scroll-button(right) {
+      position-area: inline-end center;
+      content: '\2192' / 'Next';
+    }
+  }
+
+  /* Scroll markers — anchor-positioned group */
+  &.carousel--scroll-markers {
+    scroll-marker-group: after;
+
+    &::scroll-marker-group {
+      position: fixed;
+      position-anchor: --carousel;
+      position-area: block-end;
+      position-visibility: always;
+      margin-block-end: var(--carousel-marker-offset, 1rem);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      padding-block: 0.5rem;
+    }
+
+    /* Non-paged: per-item markers */
+    &:not(.carousel--auto-pages) {
+      > *::scroll-marker {
+        content: '';
+        inline-size: 0.75rem;
+        block-size: 0.75rem;
+        border-radius: 50%;
+        background-color: var(--carousel-marker-color, currentColor);
+        opacity: 0.4;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+      }
+
+      > [data-carousel-clone]::scroll-marker,
+      > [part='autoplay']::scroll-marker {
+        content: none;
+      }
+
+      > *::scroll-marker:target-current {
+        opacity: 1;
+        background-color: var(
+          --carousel-marker-active-color,
+          var(--carousel-marker-color, currentColor)
+        );
+      }
+
+      > *::scroll-marker:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+      }
+    }
+
+    /* Paged: per-column markers */
+    &.carousel--auto-pages {
+      &::column::scroll-marker {
+        content: '';
+        inline-size: 0.75rem;
+        block-size: 0.75rem;
+        border-radius: 50%;
+        background-color: var(--carousel-marker-color, currentColor);
+        opacity: 0.4;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+      }
+
+      &::column::scroll-marker:target-current {
+        opacity: 1;
+        background-color: var(
+          --carousel-marker-active-color,
+          var(--carousel-marker-color, currentColor)
+        );
+      }
+
+      &::column::scroll-marker:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+      }
+    }
+  }
+
+  /* Inert — dim/disable off-screen content */
+  &.carousel--inert {
+    &:not(.carousel--auto-pages) > * {
+      container-type: scroll-state;
+
+      > * {
+        transition: opacity 0.5s ease;
+
+        @container not scroll-state(snapped) {
+          interactivity: inert;
+          opacity: var(--carousel-inert-opacity, 0.25);
+        }
+      }
+    }
+
+    &.carousel--auto-pages > * {
+      animation: carousel-offscreen-inert linear both;
+      animation-timeline: view(x);
+    }
+  }
+
+  /* Autoplay — play/pause toggle (enhanced by the Lit component) */
+  & > [part='autoplay'] {
+    position: fixed;
+    position-anchor: --carousel;
+    position-area: block-end inline-end;
+    position-visibility: always;
+    margin-block-end: var(--carousel-marker-offset, 1rem);
+    margin-inline-end: 0.5rem;
+    z-index: var(--z-tier-raised);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2rem;
+    block-size: 2rem;
+    border: none;
+    border-radius: 50%;
+    background: var(--color-surface-xl);
+    color: var(--carousel-button-color, currentColor);
+    opacity: 0.7;
+    cursor: pointer;
+    font-size: 0.75rem;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+  }
+
+  /* Force stop — always stop at each snap point */
+  &.carousel--force-stop {
+    &:not(.carousel--auto-pages) > * {
+      scroll-snap-stop: always;
+    }
+
+    &.carousel--auto-pages::column {
+      scroll-snap-stop: always;
+    }
+  }
+}
+
+@keyframes carousel-offscreen-inert {
+  entry 0%,
+  exit 100% {
+    interactivity: inert;
+    opacity: var(--carousel-inert-opacity, 0.25);
+  }
+
+  entry 100%,
+  exit 0% {
+    interactivity: auto;
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel {
+    scroll-behavior: auto;
+
+    &.carousel--inert:not(.carousel--auto-pages) > * > * {
+      transition: none;
+    }
+
+    &.carousel--inert.carousel--auto-pages > * {
+      animation: none;
+    }
+  }
+}

package/assets/css/patterns/cluster.css

@@ -0,0 +1,64 @@
+/**
+ * Cluster — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Cluster — flexible wrapping group with 9 alignment positions ─────────── */
+/* First value = block axis (align-content), second = inline axis (justify). */
+.cluster,
+[class^='cluster-'],
+[class*=' cluster-'] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cluster-gap, 0.5rem);
+}
+
+.cluster-start-start {
+  place-content: start start;
+}
+.cluster-start-center {
+  place-content: start center;
+}
+.cluster-start-end {
+  place-content: start end;
+}
+.cluster-center-start {
+  place-content: center start;
+}
+.cluster-center-center {
+  place-content: center center;
+}
+.cluster-center-end {
+  place-content: center end;
+}
+.cluster-end-start {
+  place-content: end start;
+}
+.cluster-end-center {
+  place-content: end center;
+}
+.cluster-end-end {
+  place-content: end end;
+}
+
+/* Single-axis shorthands */
+.cluster-start {
+  place-content: start start;
+}
+.cluster-center {
+  place-content: center center;
+}
+.cluster-end {
+  place-content: end end;
+}
+
+/* Space distribution */
+.cluster-between {
+  justify-content: space-between;
+}
+.cluster-around {
+  justify-content: space-around;
+}
+.cluster-evenly {
+  justify-content: space-evenly;
+}

package/assets/css/patterns/code.css

@@ -0,0 +1,17 @@
+/**
+ * Code — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Inline code chip — prose <code> that isn't inside a <pre>. Element-level at
+   zero specificity (like the schema-generated button/link patterns) so bare
+   <code> needs no class and any explicit class overrides it. .font-code styles
+   type only; this adds the chip. ── */
+:where(:not(pre) > code) {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  background: var(--color-neutral-xl);
+  color: var(--color-neutral-xxd);
+  padding: 0.1em 0.4em;
+  border-radius: var(--br-default);
+}

package/assets/css/patterns/combobox.css

@@ -0,0 +1,97 @@
+/**
+ * Combobox — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Combobox — CSS shell; filtering/selection lands via Lit ───────────────── */
+.combobox {
+  --_b: var(--b-combobox, var(--b-combobox-group, var(--b-control, var(--b-default))));
+  --_br: var(--br-combobox, var(--br-combobox-group, var(--br-control, var(--br-default))));
+  --_p: var(--p-combobox, var(--p-combobox-group, var(--p-control, var(--p-default))));
+  --_ds: var(--ds-combobox, var(--ds-combobox-group, var(--ds-panel, var(--ds-default))));
+
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+
+  .combobox__input {
+    padding: var(--_p);
+    border: var(--_b);
+    border-radius: var(--_br);
+
+    &:focus {
+      outline: 2px solid var(--combobox-focus-color, var(--color-brand-primary-l));
+      outline-offset: 2px;
+    }
+  }
+
+  .combobox__listbox {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline: 0;
+    z-index: var(--z-tier-overlay);
+    margin-block-start: 0.25rem;
+    padding: 0.25rem;
+    border: var(--_b);
+    border-radius: var(--_br);
+    box-shadow: var(--_ds);
+    background: var(--color-surface-xxl);
+    max-block-size: 15rem;
+    overflow-y: auto;
+    list-style: none;
+    display: none;
+  }
+
+  /* Native open state via :has(); Lit toggles the same visibility */
+  &:has(.combobox__input:focus):has(.combobox__listbox:not(:empty)) .combobox__listbox {
+    display: block;
+  }
+
+  .combobox__option {
+    padding: var(--_p);
+    border-radius: calc(var(--_br) - 0.125rem);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover,
+    &[aria-selected='true'] {
+      background: var(--color-surface-l);
+    }
+
+    &[aria-disabled='true'] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .combobox__empty {
+    padding: var(--_p);
+    text-align: center;
+    opacity: 0.7;
+  }
+
+  &.combobox--loading .combobox__input {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10' stroke-dasharray='32' stroke-dashoffset='32'%3E%3Canimate attributeName='stroke-dashoffset' dur='1s' values='32;0' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.5rem center;
+    background-size: 1.25rem;
+    padding-inline-end: 2.5rem;
+  }
+
+  &.combobox--clearable .combobox__clear {
+    position: absolute;
+    inset-inline-end: 0.5rem;
+    inset-block-start: 50%;
+    translate: 0 -50%;
+    padding: 0.25rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    opacity: 0.5;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}

package/assets/css/patterns/comment.css

@@ -0,0 +1,88 @@
+/**
+ * Comment — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Comment — threaded avatar/header/body/footer grid ────────────────────── */
+.comment {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    'avatar header'
+    'avatar body'
+    'avatar footer';
+  gap: 1rem;
+  column-gap: 0.75rem;
+
+  .comment__avatar {
+    grid-area: avatar;
+    align-self: start;
+  }
+
+  .comment__header {
+    grid-area: header;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.5rem;
+  }
+
+  .comment__author {
+    font-weight: 600;
+  }
+
+  .comment__date {
+    font-size: 0.875em;
+    opacity: 0.7;
+  }
+
+  .comment__body {
+    grid-area: body;
+  }
+
+  .comment__footer {
+    grid-area: footer;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .comment__action {
+    font-size: 0.875em;
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+
+    &:hover,
+    &:focus-visible {
+      opacity: 1;
+    }
+  }
+
+  .comment__replies {
+    grid-column: 1 / -1;
+    margin-inline-start: var(--comment-indent, 2rem);
+    padding-inline-start: var(--comment-indent, 2rem);
+    border-inline-start: 2px solid var(--color-surface-l);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  &.comment--compact {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'header'
+      'body'
+      'footer';
+
+    .comment__avatar {
+      display: none;
+    }
+  }
+}
+
+.comment-thread {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}