@getvitops/core 0.1.0

package/css/patterns/split-link.css

@@ -0,0 +1,113 @@
+/**
+ * Split Link — a primary <a> paired with a <button> that toggles an anchored
+ * [popover] of secondary content (the "split button" pattern).
+ *
+ * No JS: the toggle uses the native Popover API (a `popovertarget` invoker); the
+ * panel is placed with CSS Anchor Positioning. Placement is authored via a single
+ * `--split-link-area` custom property (a `position-area` value expressed with
+ * logical keywords) — the Bricks control writes it onto the wrapper, where it
+ * inherits down to the panel.
+ *
+ * Anchoring: the panel lives in the top layer, so a plain `position: relative`
+ * parent can't contain it — each instance needs a unique `anchor-name`. The Bricks
+ * element sets `anchor-name` on the wrapper and a matching `position-anchor` on the
+ * panel inline (derived from the element id). For hand-authored one-offs, add your
+ * own matching pair.
+ *
+ * `.split-link--show-on-hover` (a CSS-only, non-top-layer hover reveal) lives in
+ * dropdown.css and is a separate mechanism from this click-to-toggle component.
+ */
+
+/* ── Group — the link and its toggle sit flush as one control ──────────────── */
+.split-link {
+  display: inline-flex;
+  align-items: stretch;
+  position: relative; /* containing-block fallback where anchoring is unsupported */
+}
+
+.split-link__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--split-link-toggle-pad, 0.5rem);
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  line-height: 1;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background: var(--color-surface-l);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--split-link-focus-color, var(--color-brand-primary-l));
+    outline-offset: 2px;
+  }
+
+  /* Caret flips while the panel is open (button reflects aria-expanded). */
+  .split-link__caret {
+    display: inline-block;
+    transition: rotate 0.15s ease;
+  }
+
+  &[aria-expanded='true'] .split-link__caret {
+    rotate: 180deg;
+  }
+}
+
+/* ── Panel — the content box (shared by the live popover and the builder's
+      always-visible editing variant, which omits the `popover` attribute) ───── */
+.split-link__panel {
+  --_p: var(--p-split-link, var(--p-split-link-group, var(--p-panel)));
+  --_b: var(--b-split-link, var(--b-split-link-group, var(--b-panel)));
+  --_br: var(--br-split-link, var(--br-split-link-group, var(--br-panel)));
+  --_ds: var(--ds-split-link, var(--ds-split-link-group, var(--ds-panel)));
+
+  min-inline-size: max-content;
+  max-inline-size: min(24rem, 90vw);
+  padding: var(--_p);
+  border: var(--_b);
+  border-radius: var(--_br);
+  box-shadow: var(--_ds);
+  background: var(--color-surface-xxl);
+  color: var(--color-surface-xxd);
+}
+
+/* Top-layer popover: anchored + placed via position-area. */
+[popover].split-link__panel {
+  position: fixed;
+  inset: auto;
+  /* Logical default: open below the group, spanning toward inline-end. The
+     Bricks placement control overrides --split-link-area. position-area shifts
+     to stay on-screen (it does not flip — a click panel staying put is fine). */
+  position-area: var(--split-link-area, block-end span-inline-end);
+  margin: var(--split-link-gap, 0.5rem);
+  z-index: var(--z-tier-overlay);
+
+  /* Popover API toggles display; fade across the top-layer transition. */
+  opacity: 0;
+  transition:
+    opacity 0.15s ease,
+    overlay 0.15s allow-discrete,
+    display 0.15s allow-discrete;
+
+  &:popover-open {
+    opacity: 1;
+
+    @starting-style {
+      opacity: 0;
+    }
+  }
+
+  &::backdrop {
+    background: transparent;
+  }
+}
+
+/* Builder-only: rendered without the `popover` attribute so nested content is
+   visible and droppable while editing (a live [popover] is display:none). */
+.split-link__panel--editing {
+  margin-block-start: var(--split-link-gap, 0.5rem);
+}

package/css/patterns/splitter.css

@@ -0,0 +1,212 @@
+/**
+ * Splitter — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Splitter + Image-compare — CSS shell; drag behaviour lands via Lit ────── */
+.splitter {
+  --_splitter-handle-size: var(--splitter-handle-size, 8px);
+
+  display: flex;
+
+  &:not(.splitter--vertical) {
+    flex-direction: row;
+  }
+  &.splitter--vertical {
+    flex-direction: column;
+  }
+
+  .splitter__panel {
+    overflow: auto;
+  }
+
+  .splitter__panel:first-child {
+    flex: var(--splitter-ratio, 1);
+  }
+  .splitter__panel:last-child {
+    flex: calc(2 - var(--splitter-ratio, 1));
+  }
+
+  .splitter__handle {
+    flex-shrink: 0;
+    background: currentColor;
+    opacity: 0.15;
+    transition: opacity 0.15s ease;
+    position: relative;
+
+    &:hover,
+    &:focus-visible {
+      opacity: 0.3;
+    }
+    &:focus-visible {
+      outline: 2px solid;
+      outline-offset: 2px;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 50%;
+      translate: -50% -50%;
+      background: currentColor;
+      opacity: 0.3;
+      border-radius: 1px;
+    }
+  }
+
+  &:not(.splitter--vertical) .splitter__handle {
+    inline-size: var(--_splitter-handle-size);
+    cursor: col-resize;
+
+    &::after {
+      inline-size: 2px;
+      block-size: 24px;
+    }
+  }
+
+  &.splitter--vertical .splitter__handle {
+    block-size: var(--_splitter-handle-size);
+    cursor: row-resize;
+
+    &::after {
+      inline-size: 24px;
+      block-size: 2px;
+    }
+  }
+}
+
+.image-compare {
+  --_compare-position: var(--compare-position, 50%);
+  --_compare-handle-size: var(--compare-handle-size, 40px);
+
+  position: relative;
+  overflow: hidden;
+  touch-action: pan-y;
+  user-select: none;
+
+  .image-compare__before {
+    position: absolute;
+    inset: 0;
+    clip-path: inset(0 calc(100% - var(--_compare-position)) 0 0);
+  }
+
+  .image-compare__before > img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  .image-compare__after {
+    display: block;
+  }
+
+  .image-compare__after > img {
+    inline-size: 100%;
+    block-size: auto;
+    display: block;
+  }
+
+  .image-compare__handle {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--_compare-position);
+    translate: -50% 0;
+    inline-size: var(--_compare-handle-size);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: ew-resize;
+  }
+
+  .image-compare__handle::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 50%;
+    translate: -50% 0;
+    inline-size: 2px;
+    background: currentColor;
+  }
+
+  .image-compare__grip {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+    inline-size: var(--_compare-handle-size);
+    block-size: var(--_compare-handle-size);
+    background: currentColor;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+  }
+
+  .image-compare__grip::before,
+  .image-compare__grip::after {
+    content: '';
+    inline-size: 0;
+    block-size: 0;
+    border: 5px solid transparent;
+  }
+
+  .image-compare__grip::before {
+    border-inline-end-color: currentColor;
+  }
+  .image-compare__grip::after {
+    border-inline-start-color: currentColor;
+  }
+
+  .image-compare__label {
+    position: absolute;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    pointer-events: none;
+  }
+
+  .image-compare__label--before {
+    inset-block-end: 1rem;
+    inset-inline-start: 1rem;
+  }
+  .image-compare__label--after {
+    inset-block-end: 1rem;
+    inset-inline-end: 1rem;
+  }
+
+  &.image-compare--vertical {
+    touch-action: pan-x;
+
+    .image-compare__before {
+      clip-path: inset(0 0 calc(100% - var(--_compare-position)) 0);
+    }
+
+    .image-compare__handle {
+      inset-block-start: var(--_compare-position);
+      inset-inline: 0;
+      inset-block-end: auto;
+      translate: 0 -50%;
+      flex-direction: row;
+      cursor: ns-resize;
+    }
+
+    .image-compare__handle::before {
+      inset-inline: 0;
+      inset-block: auto;
+      inline-size: 100%;
+      block-size: 2px;
+      translate: 0 -50%;
+    }
+
+    .image-compare__grip::before {
+      border-block-end-color: currentColor;
+      border-inline-end-color: transparent;
+    }
+    .image-compare__grip::after {
+      border-block-start-color: currentColor;
+      border-inline-start-color: transparent;
+    }
+  }
+}

package/css/patterns/stack.css

@@ -0,0 +1,67 @@
+/**
+ * Stack — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Stack — scroll-driven stacking cards (view-timeline) ──────────────────── */
+.stack {
+  --stack-count: 4;
+  --stack-card-height: 60vh;
+  display: grid;
+}
+
+.stack__card {
+  --stack-index: 1;
+  position: sticky;
+  top: var(--stack-top, 10vh);
+}
+
+.stack__card__content {
+  box-shadow: var(--ds-card, var(--ds-card-group, var(--ds-default)));
+  border-radius: var(--br-card, var(--br-card-group, var(--br-default)));
+  min-block-size: var(--stack-card-height);
+}
+
+@supports (animation-timeline: view()) {
+  .stack__card {
+    --_index0: calc(var(--stack-index) - 1);
+    --_reverse-index: calc(var(--stack-count) - var(--_index0));
+    --_reverse-index0: calc(var(--_reverse-index) - 1);
+
+    view-timeline: --card block;
+  }
+
+  @keyframes stack-scale {
+    to {
+      transform: scale(calc(1.1 - calc(0.1 * var(--_reverse-index))));
+    }
+  }
+
+  .stack__card__content {
+    animation: stack-scale linear forwards;
+    animation-timeline: --card;
+    animation-range: contain 0% contain 100%;
+  }
+
+  @keyframes stack-fade {
+    to {
+      opacity: calc(0.5 + 0.5 * (var(--_reverse-index) / var(--stack-count)));
+    }
+  }
+
+  .stack--fade .stack__card__content {
+    animation:
+      stack-scale linear forwards,
+      stack-fade linear forwards;
+    animation-timeline: --card, --card;
+    animation-range:
+      contain 0% contain 100%,
+      contain 0% contain 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stack__card__content {
+    animation: none !important;
+  }
+}

package/css/patterns/sticky.css

@@ -0,0 +1,127 @@
+/**
+ * Sticky — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Sticky — position:sticky variants + scroll-state() stuck detection ────── */
+.sticky {
+  --_sticky-offset: var(--sticky-offset, 0);
+
+  position: sticky;
+  inset-block-start: var(--_sticky-offset);
+  z-index: var(--z-tier-sticky);
+
+  &.sticky--bottom {
+    inset-block-start: auto;
+    inset-block-end: var(--_sticky-offset);
+  }
+
+  &.sticky--inline-start {
+    inset-inline-start: var(--_sticky-offset);
+    inset-block-start: auto;
+  }
+
+  &.sticky--inline-end {
+    inset-inline-end: var(--_sticky-offset);
+    inset-inline-start: auto;
+    inset-block-start: auto;
+  }
+}
+
+.sticky-header {
+  --_sticky-offset: var(--sticky-header-offset, 0);
+
+  position: sticky;
+  inset-block-start: var(--_sticky-offset);
+  z-index: var(--z-tier-sticky);
+  container-type: scroll-state;
+
+  .sticky-header__stuck-only {
+    display: none;
+  }
+
+  @container scroll-state(stuck: top) {
+    .sticky-header__logo {
+      scale: 0.85;
+    }
+    .sticky-header__stuck-only {
+      display: block;
+    }
+    .sticky-header__unstuck-only {
+      display: none;
+    }
+  }
+}
+
+.sticky-sidebar {
+  --_sticky-offset: var(--sticky-sidebar-offset, 1rem);
+  --_sticky-max-height: var(--sticky-sidebar-max-height, calc(100vh - 2rem));
+
+  position: sticky;
+  inset-block-start: var(--_sticky-offset);
+  max-block-size: var(--_sticky-max-height);
+  overflow-y: auto;
+  align-self: flex-start;
+}
+
+table.sticky-table {
+  position: relative;
+
+  thead {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 10;
+  }
+
+  thead th {
+    background: inherit;
+  }
+
+  &.sticky-table--first-col th:first-child,
+  &.sticky-table--first-col td:first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: 5;
+  }
+
+  &.sticky-table--first-col thead th:first-child {
+    z-index: 15;
+  }
+}
+
+.sticky-footer {
+  --_sticky-offset: var(--sticky-footer-offset, 0);
+
+  position: sticky;
+  inset-block-end: var(--_sticky-offset);
+  z-index: var(--z-tier-sticky);
+  container-type: scroll-state;
+}
+
+.sticky-nav {
+  position: sticky;
+  inset-block-start: var(--sticky-nav-offset, 0);
+  z-index: var(--z-tier-sticky);
+
+  .sticky-nav__item {
+    container-type: scroll-state;
+  }
+
+  .sticky-nav__indicator {
+    opacity: 0;
+    scale: 0.8;
+    transition:
+      opacity 0.2s ease,
+      scale 0.2s ease;
+  }
+
+  @container scroll-state(snapped: block) {
+    .sticky-nav__link {
+      font-weight: 600;
+    }
+    .sticky-nav__indicator {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+}

package/css/patterns/subgrid.css

@@ -0,0 +1,178 @@
+/**
+ * Subgrid — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Subgrid — content-aligned cards/tables via CSS subgrid ────────────────── */
+.subgrid {
+  --_items-per-row: var(--items-per-row, 3);
+  --_rows-per-item: var(--rows-per-item, 2);
+  --_subgrid-gap: var(--subgrid-gap, 1.5rem);
+
+  display: grid;
+  grid-template-columns: repeat(var(--_items-per-row), 1fr);
+  gap: var(--_subgrid-gap);
+
+  > * {
+    grid-row: span var(--_rows-per-item);
+    display: grid;
+    grid-template-rows: subgrid;
+  }
+
+  &.subgrid-cols-1 {
+    --_items-per-row: 1;
+  }
+  &.subgrid-cols-2 {
+    --_items-per-row: 2;
+  }
+  &.subgrid-cols-3 {
+    --_items-per-row: 3;
+  }
+  &.subgrid-cols-4 {
+    --_items-per-row: 4;
+  }
+
+  &.subgrid-rows-2 {
+    --_rows-per-item: 2;
+  }
+  &.subgrid-rows-3 {
+    --_rows-per-item: 3;
+  }
+  &.subgrid-rows-4 {
+    --_rows-per-item: 4;
+  }
+
+  &.subgrid-responsive {
+    @media (width < 60rem) {
+      --_items-per-row: min(var(--items-per-row, 3), 2);
+    }
+    @media (width < 40rem) {
+      --_items-per-row: 1;
+    }
+  }
+}
+
+/* Subgrid card — internal rows align across siblings */
+.subgrid-card {
+  --_card-rows: var(--subgrid-card-rows, 4);
+  --_card-padding: var(--subgrid-card-padding, 1.5rem);
+
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span var(--_card-rows);
+  padding: var(--_card-padding);
+  border: var(--b-card, var(--b-card-group, var(--b-default)));
+  border-radius: var(--br-card, var(--br-card-group, var(--br-default)));
+
+  .subgrid-card__media {
+    margin-inline: calc(-1 * var(--_card-padding));
+
+    > img {
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .subgrid-card__footer {
+    align-self: end;
+  }
+}
+
+/* Pricing table with aligned feature rows */
+.pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--pricing-columns, 3), 1fr);
+}
+
+.pricing-card {
+  --_pricing-rows: var(--pricing-card-rows, auto);
+
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span var(--_pricing-rows);
+  gap: 0;
+  border: var(--b-card, var(--b-card-group, var(--b-default)));
+  border-radius: var(--br-card, var(--br-card-group, var(--br-default)));
+  overflow: hidden;
+
+  .pricing-card__header {
+    padding: var(--pricing-header-padding, 1.5rem);
+    text-align: center;
+  }
+
+  .pricing-card__price {
+    padding: var(--pricing-price-padding, 1rem 1.5rem);
+    text-align: center;
+    font-size: var(--pricing-price-size, 2.5rem);
+    font-weight: 700;
+  }
+
+  .pricing-card__features {
+    padding: var(--pricing-features-padding, 1.5rem);
+    list-style: none;
+    margin: 0;
+  }
+
+  .pricing-card__feature {
+    padding-block: 0.5rem;
+    border-block-end: var(--b-card, var(--b-card-group, var(--b-default)));
+
+    &:last-child {
+      border-block-end: none;
+    }
+  }
+
+  .pricing-card__cta {
+    padding: var(--pricing-cta-padding, 1.5rem);
+    text-align: center;
+    align-self: end;
+  }
+
+  &.pricing-card--featured {
+    scale: 1.02;
+    z-index: var(--z-tier-raised);
+  }
+}
+
+/* Comparison table with subgrid columns */
+.comparison-table {
+  --_comparison-columns: var(--comparison-columns, 4);
+
+  display: grid;
+  grid-template-columns:
+    minmax(150px, 1fr)
+    repeat(calc(var(--_comparison-columns) - 1), minmax(100px, 1fr));
+  border: var(--b-card, var(--b-card-group, var(--b-default)));
+  border-radius: var(--br-card, var(--br-card-group, var(--br-default)));
+  overflow: hidden;
+
+  .comparison-table__header,
+  .comparison-table__row {
+    display: contents;
+  }
+
+  .comparison-table__header > * {
+    padding: var(--comparison-header-padding, 1rem);
+    font-weight: 600;
+    text-align: center;
+    border-block-end: var(--b-card, var(--b-card-group, var(--b-default)));
+  }
+
+  .comparison-table__row > * {
+    padding: var(--comparison-cell-padding, 1rem);
+    border-block-end: var(--b-card, var(--b-card-group, var(--b-default)));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .comparison-table__row > *:first-child {
+    justify-content: flex-start;
+    font-weight: 500;
+  }
+
+  .comparison-table__row:last-child > * {
+    border-block-end: none;
+  }
+}