@getvitops/generator 0.1.0

package/assets/css/patterns/forms.css

@@ -0,0 +1,335 @@
+/**
+ * Forms — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Form group — label + control + helper/error stack ─────────────────────── */
+.form-group {
+  --_form-group-gap: var(--form-group-gap, 0.5rem);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--_form-group-gap);
+
+  .form-group__label {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25rem;
+    font-weight: 500;
+    font-size: var(--fs-form-label, 0.875rem);
+  }
+
+  .form-group__optional {
+    font-weight: 400;
+    font-size: 0.75em;
+    opacity: 0.7;
+  }
+
+  .form-group__helper {
+    font-size: var(--form-helper-size, 0.75rem);
+    opacity: 0.8;
+  }
+
+  .form-group__error {
+    font-size: var(--form-error-size, 0.75rem);
+    color: var(--color-danger-d);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .form-group__counter {
+    font-size: var(--form-counter-size, 0.75rem);
+    margin-inline-start: auto;
+    opacity: 0.7;
+  }
+}
+
+/* ── Fieldset — grouped controls ───────────────────────────────────────────── */
+fieldset.fieldset,
+.fieldset {
+  --_p: var(--p-fieldset, var(--p-panel, var(--p-default)));
+  --_br: var(--br-fieldset, var(--br-panel, var(--br-default)));
+  --_b: var(--b-fieldset, var(--b-panel, var(--b-default)));
+
+  border: var(--_b);
+  border-radius: var(--_br);
+  padding: var(--_p);
+  margin: 0;
+
+  > legend {
+    font-weight: 600;
+    padding-inline: 0.5rem;
+    margin-inline-start: -0.5rem;
+  }
+
+  .fieldset__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fieldset-gap, 1.5rem);
+  }
+
+  &.fieldset--borderless {
+    border: none;
+    padding: 0;
+  }
+}
+
+/* ── Base text control — inputs, textarea, and select share the control radius */
+.form-group > input:not([type='checkbox']):not([type='radio']),
+.form-group > textarea,
+.input-group > input,
+.input-group > textarea {
+  --_br: var(--br-input, var(--br-control, var(--br-default)));
+  --_b: var(--b-input, var(--b-control, var(--b-default)));
+  --_p: var(--p-input, var(--p-control, var(--p-default)));
+
+  border: var(--_b);
+  border-radius: var(--_br);
+  padding: var(--_p);
+  background: var(--color-surface-xxl);
+}
+
+/* ── Input group — input flanked by icons/addons ───────────────────────────── */
+.input-group {
+  --_br: var(--br-input-group, var(--br-control, var(--br-default)));
+  --_b: var(--b-input-group, var(--b-control, var(--b-default)));
+
+  display: flex;
+  align-items: stretch;
+
+  /* Bridge to .group / .group-inline radius collapsing (compose group group-inline) */
+  --br-grouped: var(--_br);
+
+  .input-group__addon {
+    display: flex;
+    align-items: center;
+    padding-inline: 0.75rem;
+    border: var(--_b);
+  }
+
+  .input-group__addon:first-child {
+    border-inline-end: none;
+  }
+  .input-group__addon:last-child {
+    border-inline-start: none;
+  }
+
+  > input,
+  > select,
+  > textarea {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .input-group__icon {
+    position: absolute;
+    inset-block: 0;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+    color: currentColor;
+    opacity: 0.5;
+  }
+  .input-group__icon--start {
+    inset-inline-start: 0.75rem;
+  }
+  .input-group__icon--end {
+    inset-inline-end: 0.75rem;
+  }
+
+  &.input-group--has-icon-start > input {
+    padding-inline-start: 2.5rem;
+  }
+  &.input-group--has-icon-end > input {
+    padding-inline-end: 2.5rem;
+  }
+}
+
+/* ── Custom checkbox / radio ───────────────────────────────────────────────── */
+.custom-check {
+  --_check-size: var(--check-size, 1.25rem);
+  --_br: var(--br-checkbox, var(--br-control, var(--br-default)));
+  --_b: var(--b-checkbox, var(--b-control, var(--b-default)));
+
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+
+  input[type='checkbox'],
+  input[type='radio'] {
+    position: absolute;
+    opacity: 0;
+    inline-size: 0;
+    block-size: 0;
+  }
+
+  .custom-check__box {
+    flex-shrink: 0;
+    inline-size: var(--_check-size);
+    block-size: var(--_check-size);
+    border: var(--_b);
+    border-radius: var(--_br);
+    background: var(--color-surface-xxl);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease;
+  }
+
+  input[type='radio'] + .custom-check__box {
+    border-radius: var(--br-radio, var(--br-circle, 50%));
+  }
+
+  .custom-check__indicator {
+    opacity: 0;
+    transform: scale(0.5);
+    transition:
+      opacity 0.15s ease,
+      transform 0.15s ease;
+  }
+
+  input:checked + .custom-check__box {
+    background: var(--color-brand-primary);
+    border-color: var(--color-brand-primary);
+
+    .custom-check__indicator {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  input:focus-visible + .custom-check__box {
+    outline: 2px solid var(--check-focus-color, var(--color-brand-primary-l));
+    outline-offset: 2px;
+  }
+
+  input:disabled + .custom-check__box {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:has(input:disabled) {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+
+  input:indeterminate + .custom-check__box .custom-check__indicator--check {
+    display: none;
+  }
+  input:indeterminate + .custom-check__box .custom-check__indicator--indeterminate {
+    display: block;
+    opacity: 1;
+    transform: scale(1);
+  }
+  .custom-check__indicator--indeterminate {
+    display: none;
+    inline-size: 0.5rem;
+    block-size: 2px;
+    background: currentColor;
+  }
+}
+
+/* ── Switch / toggle ───────────────────────────────────────────────────────── */
+.switch {
+  --_switch-width: var(--switch-width, 2.5rem);
+  --_switch-height: var(--switch-height, 1.5rem);
+  --_switch-thumb-size: var(--switch-thumb-size, 1.25rem);
+
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    inline-size: 0;
+    block-size: 0;
+  }
+
+  .switch__track {
+    position: relative;
+    inline-size: var(--_switch-width);
+    block-size: var(--_switch-height);
+    border-radius: var(--br-switch-track, var(--br-pill, 999px));
+    background: var(--color-surface-l);
+    transition: background-color 0.2s ease;
+  }
+
+  .switch__thumb {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 2px;
+    translate: 0 -50%;
+    inline-size: var(--_switch-thumb-size);
+    block-size: var(--_switch-thumb-size);
+    border-radius: var(--br-switch-thumb, var(--br-circle, 50%));
+    background: #fff;
+    box-shadow: var(--shadow-sm);
+    transition: inset-inline-start 0.2s ease;
+  }
+
+  input:checked + .switch__track {
+    background: var(--color-brand-primary);
+
+    .switch__thumb {
+      inset-inline-start: calc(100% - var(--_switch-thumb-size) - 2px);
+    }
+  }
+
+  input:focus-visible + .switch__track {
+    outline: 2px solid var(--switch-focus-color, var(--color-brand-primary-l));
+    outline-offset: 2px;
+  }
+
+  input:disabled + .switch__track {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:has(input:disabled) {
+    cursor: not-allowed;
+  }
+}
+
+/* ── Custom select (appearance: base-select) ───────────────────────────────── */
+/* The class may sit on a wrapper (`.custom-select > select`) or directly on the
+ * `select` (`select.custom-select`); style both so the control radius applies. */
+.custom-select {
+  position: relative;
+  display: inline-block;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset-inline-end: 0.75rem;
+    inset-block-start: 50%;
+    translate: 0 -50%;
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-inline-end: 2px solid currentColor;
+    border-block-end: 2px solid currentColor;
+    transform: rotate(45deg);
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}
+
+.custom-select select,
+select.custom-select {
+  appearance: base-select;
+  padding: var(--p-select, var(--p-control, var(--p-default)));
+  border: var(--b-select, var(--b-control, var(--b-default)));
+  border-radius: var(--br-select, var(--br-control, var(--br-default)));
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--select-focus-color, var(--color-brand-primary-l));
+    outline-offset: 2px;
+  }
+}

package/assets/css/patterns/grouped.css

@@ -0,0 +1,86 @@
+/**
+ * Grouped — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Bordered — width/style hooks so .grouped can collapse shared borders ──── */
+.bordered {
+  --_bw: var(--bw, 1px);
+  --_bs: var(--bs, solid);
+  border-width: var(--_bw);
+  border-style: var(--_bs);
+  border-color: var(--bc, var(--color-surface-xl, currentColor));
+}
+
+/* ── Group — collapse border-radius (+ shared borders) across direct children ─
+   Put the class on the CONTAINER, not each child. Compose children with .bordered
+   to also collapse their shared borders.
+     .group-inline / .group-block  force the axis (no style-query support needed).
+     .group                        defaults to inline and auto-flips to block when
+                                   its container is a column — read from the
+                                   --_flex-direction the flex utilities publish, via
+                                   a style query (progressive; inline is the fallback). */
+.group,
+.group-inline,
+.group-block {
+  --_grouped-br: var(--br-grouped, var(--br-default));
+}
+.group > *,
+.group-inline > *,
+.group-block > * {
+  border-radius: 0;
+}
+
+/* Corners common to both axes: first child keeps the start-start corner, last the
+   end-end corner. */
+.group > :first-child,
+.group-inline > :first-child,
+.group-block > :first-child {
+  border-start-start-radius: var(--_grouped-br);
+}
+.group > :last-child,
+.group-inline > :last-child,
+.group-block > :last-child {
+  border-end-end-radius: var(--_grouped-br);
+}
+
+/* Inline axis — default + explicit .group-inline (also the bare-.group fallback). */
+.group > :first-child,
+.group-inline > :first-child {
+  border-end-start-radius: var(--_grouped-br);
+}
+.group > :last-child,
+.group-inline > :last-child {
+  border-start-end-radius: var(--_grouped-br);
+}
+.group > .bordered + .bordered,
+.group-inline > .bordered + .bordered {
+  border-inline-start-width: 0;
+}
+
+/* Block axis — explicit .group-block, no style query needed. */
+.group-block > :first-child {
+  border-start-end-radius: var(--_grouped-br);
+}
+.group-block > :last-child {
+  border-end-start-radius: var(--_grouped-br);
+}
+.group-block > .bordered + .bordered {
+  border-block-start-width: 0;
+}
+
+/* Auto axis — bare .group follows a column container, overriding the inline default. */
+@container style(--_flex-direction: column) {
+  .group > :first-child {
+    border-end-start-radius: 0;
+    border-start-end-radius: var(--_grouped-br);
+  }
+  .group > :last-child {
+    border-start-end-radius: 0;
+    border-end-start-radius: var(--_grouped-br);
+  }
+  .group > .bordered + .bordered {
+    border-inline-start-width: var(--_bw, 1px);
+    border-block-start-width: 0;
+  }
+}

package/assets/css/patterns/horizontal-scroll.css

@@ -0,0 +1,40 @@
+/**
+ * Horizontal Scroll — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Horizontal scroll — pin a section, scroll it sideways on vertical scroll ─ */
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) {
+    @keyframes horizontal-scroll-move {
+      to {
+        transform: translateX(calc(-100% + 95cqi));
+      }
+    }
+
+    .horizontal-scroll:not([class*='horizontal-scroll--disabled']) {
+      height: 300vh;
+      overflow-x: clip;
+      container-type: inline-size;
+      view-timeline-name: --horizontal-scroll-tl;
+      view-timeline-axis: block;
+
+      > .horizontal-scroll__sticky {
+        position: sticky;
+        top: 0;
+        height: 100cqb;
+        width: 100cqi;
+        overflow-x: clip;
+
+        > .horizontal-scroll__track {
+          height: 100cqb;
+          width: 150cqi;
+          will-change: transform;
+          animation: linear horizontal-scroll-move forwards;
+          animation-timeline: --horizontal-scroll-tl;
+          animation-range: contain 0% contain 100%;
+        }
+      }
+    }
+  }
+}

package/assets/css/patterns/icon.css

@@ -0,0 +1,72 @@
+/**
+ * Icon — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Icon — sizing wrapper, CSS-mask icon, and tappable icon button ───────── */
+.icon {
+  --_size: var(--icon-size, 1.25em);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  flex-shrink: 0;
+  vertical-align: middle;
+
+  > svg {
+    inline-size: 100%;
+    block-size: 100%;
+    fill: currentColor;
+  }
+
+  > img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: contain;
+  }
+}
+
+.icon-mask {
+  --_size: var(--icon-size, 1.25em);
+
+  display: inline-block;
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  background-color: currentColor;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  vertical-align: middle;
+}
+
+.icon-button {
+  --_size: var(--icon-button-size, 2.5rem);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--icon-button-radius, 0.375rem);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background: var(--color-surface-l);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--icon-button-focus-color, var(--color-brand-primary-l));
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

package/assets/css/patterns/lightbox.css

@@ -0,0 +1,156 @@
+/**
+ * Lightbox — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Lightbox — thumbnail grid + full-screen dialog w/ view transitions ────── */
+.lightbox {
+  --_br: var(--br-lightbox, var(--br-lightbox-group, var(--br-default)));
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--lightbox-thumb-size, 150px), 1fr));
+  gap: var(--lightbox-gap, 0.5rem);
+
+  .lightbox__item {
+    position: relative;
+    aspect-ratio: var(--lightbox-aspect, 1);
+    overflow: hidden;
+    border-radius: var(--_br);
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--lightbox-focus-color, currentColor);
+      outline-offset: 2px;
+    }
+  }
+
+  .lightbox__thumb {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    transition: scale 0.3s ease;
+    view-transition-name: match-element;
+  }
+
+  .lightbox__item:hover .lightbox__thumb {
+    scale: 1.05;
+  }
+}
+
+dialog.lightbox-dialog {
+  position: fixed;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: 100%;
+  max-block-size: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: var(--lightbox-dialog-bg, oklch(0 0 0 / 0.92));
+  color: #fff;
+  display: grid;
+  place-items: center;
+
+  &::backdrop {
+    background: transparent;
+  }
+
+  &[open] {
+    display: grid;
+  }
+
+  .lightbox-dialog__content {
+    position: relative;
+    max-inline-size: 90vw;
+    max-block-size: 90vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .lightbox-dialog__image {
+    max-inline-size: 100%;
+    max-block-size: 90vh;
+    object-fit: contain;
+    view-transition-name: match-element;
+  }
+
+  .lightbox-dialog__close {
+    position: absolute;
+    inset-block-start: 1rem;
+    inset-inline-end: 1rem;
+    inline-size: 3rem;
+    block-size: 3rem;
+    padding: 0;
+    background: var(--lightbox-close-bg, transparent);
+    border: none;
+    border-radius: 50%;
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.15s ease;
+    z-index: 10;
+
+    &:hover {
+      background: var(--lightbox-close-hover-bg, oklch(1 0 0 / 0.15));
+    }
+    &:focus-visible {
+      outline: 2px solid var(--lightbox-focus-color, currentColor);
+      outline-offset: 2px;
+    }
+  }
+
+  .lightbox-dialog__nav {
+    position: absolute;
+    inset-block: 0;
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+
+    &[data-direction='prev'] {
+      inset-inline-start: 0;
+    }
+    &[data-direction='next'] {
+      inset-inline-end: 0;
+    }
+  }
+
+  .lightbox-dialog__nav-button {
+    inline-size: 3rem;
+    block-size: 3rem;
+    padding: 0;
+    background: var(--lightbox-nav-bg, transparent);
+    border: none;
+    border-radius: 50%;
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background: var(--lightbox-nav-hover-bg, oklch(1 0 0 / 0.15));
+    }
+    &:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+  }
+
+  .lightbox-dialog__caption {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline: 0;
+    padding: 1rem 2rem;
+    text-align: center;
+  }
+}
+
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation-duration: 0.3s;
+}