@getvitops/core 0.1.0

package/css/patterns/tooltip.css

@@ -0,0 +1,68 @@
+/**
+ * Tooltip — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Tooltip — anchored popover shown on hover/focus ───────────────────────── */
+/* Shown in the top layer via the Popover API: deferred.ts opens it on
+   hover/focus, and the trigger's `popovertarget` is the no-JS click fallback.
+   The top layer is what makes the flip work — it escapes the page's
+   container-query containment (`body { container-type }`), so the fixed
+   tooltip's containing block is the viewport and the flip fallbacks resolve
+   against the viewport edges (a plain :hover reveal stays trapped in that
+   containment and can only shift, never flip). Trigger and tooltip are siblings
+   so the tooltip is not a descendant of its own anchor. Several tooltips on one
+   page each need a distinct --tooltip anchor name (or an `anchor-scope`
+   wrapper); the single shared name here is fine for one-off use. */
+.tooltip-trigger {
+  anchor-name: --tooltip-anchor;
+}
+
+[popover].tooltip {
+  --_p: var(--p-tooltip, var(--p-tooltip-group, var(--p-default)));
+  --_br: var(--br-tooltip, var(--br-tooltip-group, var(--br-default)));
+  --_ds: var(--ds-tooltip, var(--ds-tooltip-group, var(--ds-default)));
+  --_fs: var(--fs-tooltip, var(--fs-tooltip-group, var(--fs-default)));
+
+  /* Anchored via inset(), NOT position-area: the flip try-tactics only flip
+     anchor()-based insets — position-area silently shifts-to-fit. Placement is a
+     logical inset + matching self-alignment; overriding them re-points it to any
+     side/corner and the flip chain adapts — nothing assumes top/bottom, so the
+     same pattern serves an edge icon or an `inline-end` megamenu. `margin` is the
+     uniform anchor gap and flips with the inset. (flip-* is Anchor Positioning v2
+     — native Chrome only; polyfilled engines keep the default side.) */
+  position: fixed;
+  position-anchor: --tooltip-anchor;
+  inset: auto;
+  inset-block-start: anchor(block-end);
+  justify-self: anchor-center;
+  position-try-fallbacks:
+    flip-block,
+    flip-inline,
+    flip-block flip-inline;
+  margin: 0.5rem;
+  padding: var(--_p);
+  border-radius: var(--_br);
+  box-shadow: var(--_ds);
+  background: var(--color-surface-xxd);
+  color: var(--color-surface-xxl);
+  font-size: var(--_fs);
+  white-space: nowrap;
+  max-inline-size: 20rem;
+  pointer-events: none;
+
+  /* The 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;
+    }
+  }
+}

package/css/patterns/tree.css

@@ -0,0 +1,126 @@
+/**
+ * Tree — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Tree — hierarchical view over nested lists / <details> ───────────────── */
+.tree {
+  --_p: var(--p-tree, var(--p-tree-group, var(--p-default)));
+
+  list-style: none;
+  margin: 0;
+  padding: var(--_p);
+
+  .tree__item {
+    position: relative;
+  }
+
+  .tree__item > .tree {
+    margin-inline-start: var(--tree-indent, 1.5rem);
+    padding-inline-start: var(--tree-indent, 1.5rem);
+    border-inline-start: 1px solid var(--color-surface-l);
+  }
+
+  .tree__content,
+  details.tree__item > summary {
+    display: flex;
+    align-items: center;
+    gap: var(--tree-gap, 0.25rem);
+    padding: 0.25rem 0;
+  }
+
+  .tree__content {
+    cursor: default;
+  }
+
+  details.tree__item > summary {
+    cursor: pointer;
+    list-style: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+    &::marker {
+      content: none;
+    }
+    &:focus-visible {
+      outline: 2px solid var(--tree-focus-color, currentColor);
+      outline-offset: 2px;
+    }
+  }
+
+  .tree__toggle {
+    flex-shrink: 0;
+    inline-size: var(--tree-icon-size, 1.25rem);
+    block-size: var(--tree-icon-size, 1.25rem);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s ease;
+  }
+
+  details.tree__item[open] > summary .tree__toggle {
+    transform: rotate(90deg);
+  }
+
+  .tree__toggle::before {
+    content: '';
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-inline-end: 2px solid currentColor;
+    border-block-end: 2px solid currentColor;
+    transform: rotate(-45deg);
+  }
+
+  .tree__icon {
+    flex-shrink: 0;
+    inline-size: var(--tree-icon-size, 1.25rem);
+    block-size: var(--tree-icon-size, 1.25rem);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tree__label {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tree__actions {
+    display: flex;
+    gap: 0.25rem;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .tree__item:hover .tree__actions,
+  .tree__item:focus-within .tree__actions {
+    opacity: 1;
+  }
+
+  .tree__item.tree__item--dragging {
+    opacity: 0.5;
+  }
+
+  &.tree--lines .tree__item {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset-inline-start: calc(-1 * var(--tree-indent, 1.5rem) + 0.5rem);
+      inset-block-start: 0;
+      block-size: 1rem;
+      inline-size: calc(var(--tree-indent, 1.5rem) - 0.5rem);
+      border-inline-start: 1px solid var(--color-surface-l);
+      border-block-end: 1px solid var(--color-surface-l);
+    }
+  }
+
+  &.tree--lines > .tree__item::before {
+    display: none;
+  }
+}

package/css/utilities.css

@@ -0,0 +1,351 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   UTILITIES — display / visibility / disclosure (CSS + Bricks output only)
+   Tailwind ships hidden/sr-only/block/flex/grid natively, so these live ONLY in
+   the static framework and are deliberately NOT emitted by emitTailwind().
+
+   Responsive variant naming matches layout.css (Tailwind-aligned): the base
+   utility is emitted bare, then each tier repeats it with an sm-/md-/lg-/xl-
+   prefix inside an unnamed `@container (min-width: Xrem)` block, resolving
+   against the nearest container-type ancestor (body { container-type }).
+   Breakpoints: sm 30rem · md 48rem · lg 64rem · xl 80rem.
+
+   CASCADE NOTE: this file MUST be imported AFTER layout.css. Tailwind's
+   `hidden md-flex` idiom relies on every breakpoint display variant sitting
+   later in the cascade than every bare display utility. layout.css already owns
+   bare `.flex` + `.{bp}-flex`; to keep the reveal idiom working we re-emit the
+   `.{bp}-flex` reveal variants (identical decls) so they land after this file's
+   bare `.hidden`. The later copy wins; behaviour is unchanged.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Display / visibility — Tailwind-exact base values ──
+   Base = mobile. `hidden` hides; the sm-/md-/lg-/xl- variants below REVEAL
+   (block/flex/inline/inline-block/grid) or HIDE (`.{bp}-hidden`) at a tier.
+   Bare `.flex` is intentionally omitted — layout.css owns it. */
+.block {
+  display: block;
+}
+.inline {
+  display: inline;
+}
+.inline-block {
+  display: inline-block;
+}
+.grid {
+  display: grid;
+}
+.hidden {
+  display: none;
+}
+
+@container (min-width: 30rem) {
+  .sm-block {
+    display: block;
+  }
+  .sm-flex {
+    display: flex;
+  }
+  .sm-inline {
+    display: inline;
+  }
+  .sm-inline-block {
+    display: inline-block;
+  }
+  .sm-grid {
+    display: grid;
+  }
+  .sm-hidden {
+    display: none;
+  }
+}
+@container (min-width: 48rem) {
+  .md-block {
+    display: block;
+  }
+  .md-flex {
+    display: flex;
+  }
+  .md-inline {
+    display: inline;
+  }
+  .md-inline-block {
+    display: inline-block;
+  }
+  .md-grid {
+    display: grid;
+  }
+  .md-hidden {
+    display: none;
+  }
+}
+@container (min-width: 64rem) {
+  .lg-block {
+    display: block;
+  }
+  .lg-flex {
+    display: flex;
+  }
+  .lg-inline {
+    display: inline;
+  }
+  .lg-inline-block {
+    display: inline-block;
+  }
+  .lg-grid {
+    display: grid;
+  }
+  .lg-hidden {
+    display: none;
+  }
+}
+@container (min-width: 80rem) {
+  .xl-block {
+    display: block;
+  }
+  .xl-flex {
+    display: flex;
+  }
+  .xl-inline {
+    display: inline;
+  }
+  .xl-inline-block {
+    display: inline-block;
+  }
+  .xl-grid {
+    display: grid;
+  }
+  .xl-hidden {
+    display: none;
+  }
+}
+
+/* ── Screen-reader-only (visually hidden but exposed to AT) ──
+   Standard recipe: pull out of flow, clamp to 1px, clip, unwrap. `.not-sr-only`
+   reverses it (e.g. reveal a skip-link on focus). Both get sm-/md-/lg-/xl-
+   variants so visibility can flip per container tier. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0); /* legacy fallback */
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+.not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  clip-path: none;
+  white-space: normal;
+}
+
+@container (min-width: 30rem) {
+  .sm-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .sm-not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    clip-path: none;
+    white-space: normal;
+  }
+}
+@container (min-width: 48rem) {
+  .md-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .md-not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    clip-path: none;
+    white-space: normal;
+  }
+}
+@container (min-width: 64rem) {
+  .lg-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .lg-not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    clip-path: none;
+    white-space: normal;
+  }
+}
+@container (min-width: 80rem) {
+  .xl-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .xl-not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    clip-path: none;
+    white-space: normal;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   DISCLOSURE — animatable show/hide (auto ↔ 0), layered by support
+   Layer 1 (primary, broadly supported): CSS grid 0fr↔1fr hack. Needs ONE child
+     wrapper; the wrapper clips its own content as the track reveals.
+   Layer 2 (progressive): interpolate-size + native height:auto animation.
+   Layer 3 (native <details>): animate ::details-content directly.
+   `.reveal-fade` covers the display:none fade case with the allow-discrete +
+   @starting-style idiom (same as nav.css `.drawer-menu`).
+   Toggle: consumer sets `.is-open` / `[data-open]` (mirrors .is-active /
+   [data-active] in animation.css), OR nests under an [open] element (<details>).
+   ═══════════════════════════════════════════════════════════════════════════ */
+:root {
+  --reveal-duration: 0.4s;
+}
+
+/* ── Layer 1: grid-rows hack (primary) ──
+   Markup:
+     <div class="reveal" id="panel">        <!-- the animated track -->
+       <div> … </div>                          <!-- required single wrapper -->
+     </div>
+   Toggle .is-open / [data-open] on `.reveal` (JS/Lit), or nest under an [open]
+   element (e.g. <details>). The wrapper needs min-height:0 + overflow:hidden so
+   the content can be clipped to the 0fr track. */
+.reveal {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--reveal-duration) var(--interact-easing, ease);
+}
+.reveal > * {
+  min-height: 0;
+  overflow: hidden;
+}
+.reveal.is-open,
+.reveal[data-open],
+:where([open]) > .reveal {
+  grid-template-rows: 1fr;
+}
+
+/* ── Layer 2: native height:auto animation (progressive enhancement) ──
+   Where interpolate-size is supported, animate height directly (no wrapper
+   needed). Guarded so unsupported engines keep the grid hack above. */
+@supports (interpolate-size: allow-keywords) {
+  :root {
+    interpolate-size: allow-keywords;
+  }
+  .reveal-h {
+    height: auto;
+    overflow: hidden;
+    transition: height var(--reveal-duration) var(--interact-easing, ease);
+  }
+  .reveal-h:not(.is-open):not([data-open]) {
+    height: 0;
+  }
+}
+
+/* ── Layer 3: native <details> disclosure ──
+   Markup:
+     <details>
+       <summary>Toggle</summary>
+       … content …
+     </details>
+   Animate the UA-generated content box directly; interpolate-size (Layer 2)
+   lets block-size reach `auto`. Guarded — engines without ::details-content just
+   snap open (fully accessible). */
+@supports selector(::details-content) {
+  details::details-content {
+    overflow: clip;
+    block-size: 0;
+    transition:
+      block-size var(--reveal-duration) var(--interact-easing, ease),
+      content-visibility var(--reveal-duration) allow-discrete;
+  }
+  details[open]::details-content {
+    block-size: auto;
+  }
+}
+
+/* ── display:none fade/slide — allow-discrete + @starting-style ──
+   Same idiom as nav.css `.drawer-menu`. Base is display:none; the open state
+   restores display and fades in, and `display`/`overlay` are transitioned with
+   allow-discrete so the element animates out before it is removed. `overlay` is
+   a no-op unless the element is in the top layer (popover/dialog) — harmless.
+   Markup: <div class="reveal-fade" [data-open]?> … </div>  (toggle .is-open) */
+.reveal-fade {
+  display: none;
+  opacity: 0;
+  transition:
+    opacity var(--reveal-duration) var(--interact-easing, ease),
+    overlay var(--reveal-duration) allow-discrete,
+    display var(--reveal-duration) allow-discrete;
+}
+.reveal-fade.is-open,
+.reveal-fade[data-open] {
+  display: block;
+  opacity: 1;
+}
+@starting-style {
+  .reveal-fade.is-open,
+  .reveal-fade[data-open] {
+    opacity: 0;
+  }
+}

package/dist/deferred.js

@@ -0,0 +1 @@
+function e(e){let t=[...e.children];parseFloat(getComputedStyle(e).getPropertyValue(`--stagger-amount`));let n=[],r=e.getBoundingClientRect().top;t.forEach(e=>{let t=Math.round(e.getBoundingClientRect().top-r),i=n.find(e=>Math.abs(e.top-t)<10);i||(i={top:t,items:[]},n.push(i)),i.items.push(e)}),n.forEach(({items:e})=>{e.forEach((e,t)=>{e.style.setProperty(`--_stagger-index`,String(t))})})}let t;function n(){clearTimeout(t),t=setTimeout(()=>{requestAnimationFrame(()=>{document.querySelectorAll(`.stagger`).forEach(e)})},100)}const r=new IntersectionObserver((e,t)=>{e.forEach(e=>{e.isIntersecting&&(e.target.classList.add(`is-active`),t.unobserve(e.target))})});function i(e){let t=e.querySelector(`.horizontal-scroll__track`);if(!t)return;let n=Array.from(t.children).reduce((e,t)=>e+t.offsetWidth,0);t.style.width=`${n}px`}document.addEventListener(`click`,e=>{let t=e.target.closest?.(`a[href^="#"]`);if(!t)return;let n=t.closest(`dialog[open]`);n&&n.close()}),window.addEventListener(`load`,()=>{requestAnimationFrame(()=>{document.querySelectorAll(`.stagger`).forEach(e),window.addEventListener(`resize`,n),document.querySelectorAll(`.horizontal-scroll`).forEach(i),document.querySelectorAll(`.animate-trigger`).forEach(e=>{r.observe(e)});let t=new Date().getFullYear();document.querySelectorAll(`[data-current-year]`).forEach(e=>{e.textContent=t.toString()})})});