@getvitops/core 0.1.0

package/css/patterns/svg.css

@@ -0,0 +1,166 @@
+/**
+ * SVG — sizing/styling utilities and decorative helpers migrated from
+ * old-css-lib. Pure CSS. The bare-<svg> reset is kept intentionally light
+ * (no forced 1em sizing) so it doesn't fight component-owned icon sizing.
+ */
+
+svg {
+  flex-shrink: 0;
+  fill: currentColor;
+}
+
+.svg-container {
+  --_svg-size: var(--svg-size, 1.5rem);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--_svg-size);
+  block-size: var(--_svg-size);
+
+  > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+}
+
+.svg-stroke > svg {
+  fill: none;
+  stroke: var(--svg-stroke-color, currentColor);
+  stroke-width: var(--svg-stroke-width, 2);
+  stroke-linecap: var(--svg-stroke-linecap, round);
+  stroke-linejoin: var(--svg-stroke-linejoin, round);
+}
+
+/* ── Animated SVG ─────────────────────────────────────────────────────────── */
+.svg-animated {
+  &.svg-animated--spin > svg {
+    animation: svg-spin 1s linear infinite;
+  }
+  &.svg-animated--pulse > svg {
+    animation: svg-pulse 1.5s ease-in-out infinite;
+  }
+  &.svg-animated--bounce > svg {
+    animation: svg-bounce 1s ease infinite;
+  }
+  &.svg-animated--draw > svg {
+    stroke-dasharray: var(--svg-dash-length, 100);
+    stroke-dashoffset: var(--svg-dash-length, 100);
+    animation: svg-draw 1.5s ease forwards;
+
+    @media (prefers-reduced-motion: reduce) {
+      stroke-dashoffset: 0;
+      animation: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &.svg-animated--spin > svg,
+    &.svg-animated--pulse > svg,
+    &.svg-animated--bounce > svg {
+      animation: none;
+    }
+  }
+}
+
+/* ── Background patterns ──────────────────────────────────────────────────── */
+.svg-pattern {
+  --_pattern-size: var(--svg-pattern-size, 20px);
+  --_pattern-color: var(--svg-pattern-color, currentColor);
+
+  background-size: var(--_pattern-size) var(--_pattern-size);
+
+  &.svg-pattern--dots {
+    background-image: radial-gradient(var(--_pattern-color) 1px, transparent 1px);
+  }
+
+  &.svg-pattern--grid {
+    background-image:
+      linear-gradient(var(--_pattern-color) 1px, transparent 1px),
+      linear-gradient(90deg, var(--_pattern-color) 1px, transparent 1px);
+  }
+
+  &.svg-pattern--diagonal {
+    background-image: repeating-linear-gradient(
+      45deg,
+      var(--_pattern-color),
+      var(--_pattern-color) 1px,
+      transparent 1px,
+      transparent 10px
+    );
+  }
+
+  &.svg-pattern--cross {
+    background-image:
+      linear-gradient(var(--_pattern-color) 1px, transparent 1px),
+      linear-gradient(90deg, var(--_pattern-color) 1px, transparent 1px);
+    background-position: center center;
+  }
+}
+
+/* ── Decorative shapes / dividers ─────────────────────────────────────────── */
+.svg-shape {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+
+  &.svg-shape--flip-x {
+    transform: scaleX(-1);
+  }
+  &.svg-shape--flip-y {
+    transform: scaleY(-1);
+  }
+  &.svg-shape--top {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+  }
+  &.svg-shape--bottom {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline: 0;
+  }
+}
+
+.svg-use {
+  display: inline-block;
+  vertical-align: middle;
+
+  > svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+}
+
+@keyframes svg-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes svg-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes svg-bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-25%);
+  }
+}
+@keyframes svg-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}

package/css/patterns/table.css

@@ -0,0 +1,106 @@
+/**
+ * Table — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Table — bare <table> or .table, with variants ────────────────────────── */
+table,
+.table {
+  --_b: var(--b-table, var(--b-table-group, var(--b-default)));
+  --_br: var(--br-table, var(--br-table-group, var(--br-default)));
+  --_fs: var(--fs-table, var(--fs-table-group, var(--fs-default)));
+  --_cell: var(--table-cell-padding, 0.75em 1em);
+
+  inline-size: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-size: var(--_fs);
+  text-align: start;
+
+  > caption {
+    caption-side: bottom;
+    padding-block-start: var(--table-caption-gap, 0.75em);
+    font-size: var(--table-caption-fs, 0.875em);
+    opacity: 0.7;
+    text-align: start;
+  }
+
+  > thead {
+    text-align: start;
+
+    > tr > th {
+      padding: var(--_cell);
+      font-weight: 600;
+      text-align: inherit;
+      border-block-end: var(--_b);
+    }
+  }
+
+  > tbody > tr > td {
+    padding: var(--_cell);
+    border-block-end: var(--_b);
+    vertical-align: baseline;
+  }
+
+  > tbody > tr:last-child > td {
+    border-block-end: none;
+  }
+
+  > tfoot > tr > td,
+  > tfoot > tr > th {
+    padding: var(--_cell);
+    font-weight: 600;
+    border-block-start: var(--_b);
+  }
+
+  &.table--bordered {
+    border: var(--_b);
+    border-radius: var(--_br);
+    overflow: hidden;
+
+    > thead > tr > th,
+    > tbody > tr > td,
+    > tfoot > tr > td,
+    > tfoot > tr > th {
+      border: var(--_b);
+    }
+  }
+
+  &.table--striped > tbody > tr:nth-child(even) {
+    background: oklch(0 0 0 / var(--table-stripe-opacity, 0.04));
+  }
+
+  &.table--hover > tbody > tr:hover {
+    background: oklch(0 0 0 / var(--table-hover-opacity, 0.08));
+  }
+
+  &.table--compact {
+    --_cell: var(--table-compact-padding, 0.375em 0.75em);
+  }
+
+  [data-numeric] {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &.table--fixed {
+    table-layout: fixed;
+  }
+
+  &.table--sticky-header > thead > tr > th {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--z-tier-raised);
+    background: inherit;
+  }
+}
+
+.table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+
+  > table,
+  > .table {
+    min-inline-size: var(--table-min-inline-size, 100%);
+  }
+}

package/css/patterns/tag.css

@@ -0,0 +1,75 @@
+/**
+ * Tag — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Tag sub-parts — pair with generated .tag / .tag-<role> ───────────────── */
+.tag__icon {
+  flex-shrink: 0;
+  inline-size: 1em;
+  block-size: 1em;
+}
+
+.tag__remove {
+  flex-shrink: 0;
+  margin-inline-start: 0.25em;
+  padding: 0.125em;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  opacity: 0.6;
+  line-height: 1;
+  transition: opacity 0.15s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+/* ── Badge indicator — numeric notification bubble (distinct from .badge) ──── */
+.badge-indicator {
+  --_size: var(--badge-size, 1.25rem);
+  --_br: var(--br-badge, var(--br-badge-group, var(--br-default)));
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--_size);
+  block-size: var(--_size);
+  padding-inline: 0.25em;
+  font-size: var(--fs-badge, var(--fs-badge-group, var(--fs-default)));
+  font-weight: 600;
+  line-height: 1;
+  border-radius: var(--br-badge-indicator, var(--br-pill, 999px));
+  background: var(--color-danger-d);
+  color: #fff;
+
+  &.badge-indicator--dot {
+    --_size: 0.5rem;
+    padding: 0;
+  }
+
+  &.badge-indicator--positioned {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    translate: 50% -50%;
+  }
+}
+
+/* ── Status dot pulse — modifier + keyframe over the generated .status-dot ─── */
+.status-dot--pulse {
+  animation: status-pulse 2s ease-in-out infinite;
+}
+
+@keyframes status-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  50% {
+    box-shadow: 0 0 0 4px currentColor;
+    opacity: 0.5;
+  }
+}

package/css/patterns/text-effects.css

@@ -0,0 +1,317 @@
+/**
+ * Text effects — typewriter, flip, rotate, gradient, highlight and stagger text
+ * animations migrated from old-css-lib. Pure-CSS value + keyframe layers; each
+ * degrades under prefers-reduced-motion. `.text-scramble` is a CSS shell — the
+ * per-character randomisation arrives with its Lit component.
+ */
+
+/* ── Typing — typewriter reveal with blinking caret ───────────────────────── */
+.typing {
+  --_typing-speed: var(--typing-speed, 3s);
+  --_typing-steps: var(--typing-steps, 20);
+  --_cursor-color: var(--typing-cursor-color, currentColor);
+  --_cursor-width: var(--typing-cursor-width, 2px);
+
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  border-inline-end: var(--_cursor-width) solid var(--_cursor-color);
+  animation:
+    typing-text var(--_typing-speed) steps(var(--_typing-steps)) forwards,
+    typing-cursor 0.75s step-end infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    border-inline-end: none;
+    animation: none;
+  }
+
+  &.typing--loop {
+    animation:
+      typing-text var(--_typing-speed) steps(var(--_typing-steps)) infinite alternate,
+      typing-cursor 0.75s step-end infinite;
+  }
+
+  &.typing--no-cursor {
+    animation: typing-text var(--_typing-speed) steps(var(--_typing-steps)) forwards;
+    border-inline-end: none;
+  }
+}
+
+@keyframes typing-text {
+  from {
+    inline-size: 0;
+  }
+  to {
+    inline-size: 100%;
+  }
+}
+@keyframes typing-cursor {
+  50% {
+    border-color: transparent;
+  }
+}
+
+/* ── Text flip — 3D rotating word list ────────────────────────────────────── */
+.text-flip {
+  --_flip-duration: var(--text-flip-duration, 3s);
+  --_flip-items: var(--text-flip-items, 3);
+
+  display: inline-block;
+  position: relative;
+  perspective: 1000px;
+  overflow: hidden;
+  vertical-align: bottom;
+
+  .text-flip__item {
+    display: block;
+    animation: text-flip-rotate calc(var(--_flip-duration) * var(--_flip-items)) infinite;
+    backface-visibility: hidden;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+
+      &:not(:first-child) {
+        display: none;
+      }
+    }
+  }
+
+  .text-flip__item:nth-child(1) {
+    animation-delay: 0s;
+  }
+  .text-flip__item:nth-child(2) {
+    animation-delay: var(--_flip-duration);
+  }
+  .text-flip__item:nth-child(3) {
+    animation-delay: calc(var(--_flip-duration) * 2);
+  }
+  .text-flip__item:nth-child(4) {
+    animation-delay: calc(var(--_flip-duration) * 3);
+  }
+  .text-flip__item:nth-child(5) {
+    animation-delay: calc(var(--_flip-duration) * 4);
+  }
+
+  .text-flip__item:not(:first-child) {
+    position: absolute;
+    inset: 0;
+  }
+}
+
+@keyframes text-flip-rotate {
+  0%,
+  20% {
+    opacity: 1;
+    transform: rotateX(0);
+  }
+  25%,
+  100% {
+    opacity: 0;
+    transform: rotateX(-90deg);
+  }
+}
+
+/* ── Text rotate — fade/slide word list ───────────────────────────────────── */
+.text-rotate {
+  --_rotate-duration: var(--text-rotate-duration, 2s);
+  --_rotate-items: var(--text-rotate-items, 3);
+
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  vertical-align: bottom;
+
+  .text-rotate__item {
+    display: block;
+    opacity: 0;
+    animation: text-rotate-fade calc(var(--_rotate-duration) * var(--_rotate-items)) infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      opacity: 1;
+      animation: none;
+
+      &:not(:first-child) {
+        display: none;
+      }
+    }
+  }
+
+  .text-rotate__item:nth-child(1) {
+    animation-delay: 0s;
+  }
+  .text-rotate__item:nth-child(2) {
+    animation-delay: var(--_rotate-duration);
+  }
+  .text-rotate__item:nth-child(3) {
+    animation-delay: calc(var(--_rotate-duration) * 2);
+  }
+  .text-rotate__item:nth-child(4) {
+    animation-delay: calc(var(--_rotate-duration) * 3);
+  }
+  .text-rotate__item:nth-child(5) {
+    animation-delay: calc(var(--_rotate-duration) * 4);
+  }
+
+  .text-rotate__item:not(:first-child) {
+    position: absolute;
+    inset: 0;
+  }
+}
+
+@keyframes text-rotate-fade {
+  0%,
+  5% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  10%,
+  30% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  35%,
+  100% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
+/* ── Text scramble — CSS shell; randomisation lands via Lit ───────────────── */
+.text-scramble {
+  display: inline-block;
+  font-family: var(--font-mono, monospace);
+
+  .text-scramble__char {
+    display: inline-block;
+    transition: opacity 0.1s ease;
+  }
+
+  .text-scramble__char--scrambled {
+    opacity: 0.3;
+  }
+}
+
+/* ── Animated gradient text ───────────────────────────────────────────────── */
+.text-gradient-animate {
+  --_gradient-speed: var(--text-gradient-speed, 3s);
+  --_gradient-colors: var(
+    --text-gradient-colors,
+    oklch(0.7 0.25 0),
+    oklch(0.7 0.25 60),
+    oklch(0.7 0.25 120),
+    oklch(0.7 0.25 180),
+    oklch(0.7 0.25 240),
+    oklch(0.7 0.25 300),
+    oklch(0.7 0.25 360)
+  );
+
+  background: linear-gradient(90deg, var(--_gradient-colors));
+  background-size: 200% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: text-gradient-shift var(--_gradient-speed) linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+@keyframes text-gradient-shift {
+  to {
+    background-position: 200% center;
+  }
+}
+
+/* ── Highlight sweep ──────────────────────────────────────────────────────── */
+.text-highlight {
+  --_highlight-color: var(--text-highlight-color, var(--color-warning-l));
+  --_highlight-duration: var(--text-highlight-duration, 0.5s);
+  --_highlight-pad-block: var(--text-highlight-pad-block, 0.1em);
+  --_highlight-pad-inline: var(--text-highlight-pad-inline, 0);
+  --_highlight-radius: var(--text-highlight-radius, 0);
+  --_highlight-skew: var(--text-highlight-skew, 0deg);
+
+  background: linear-gradient(to right, var(--_highlight-color) 50%, transparent 50%);
+  background-size: 200% 100%;
+  background-position: 100% 0;
+  border-radius: var(--_highlight-radius);
+  /* Extend the sweep slightly past the glyphs so the band doesn't sit flush to
+     the characters; keep line layout intact by clawing the padding back. */
+  padding-block: var(--_highlight-pad-block);
+  padding-inline: var(--_highlight-pad-inline);
+  margin-block: calc(-1 * var(--_highlight-pad-block));
+  margin-inline: calc(-1 * var(--_highlight-pad-inline));
+  box-decoration-break: clone;
+  /* skew is a no-op on pure inline boxes; opt in with inline-block when the
+     phrase stays on one line and a slanted marker look is wanted. */
+  transform: skewX(var(--_highlight-skew));
+  transition: background-position var(--_highlight-duration) ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    background-position: 0 0;
+  }
+
+  &.text-highlight--active,
+  &:hover {
+    background-position: 0 0;
+  }
+}
+
+/* ── Character stagger pop-in ─────────────────────────────────────────────── */
+.text-stagger {
+  display: inline-flex;
+
+  .text-stagger__char {
+    display: inline-block;
+    animation: text-stagger-pop 0.5s ease backwards;
+  }
+
+  .text-stagger__char:nth-child(1) {
+    animation-delay: 0s;
+  }
+  .text-stagger__char:nth-child(2) {
+    animation-delay: 0.05s;
+  }
+  .text-stagger__char:nth-child(3) {
+    animation-delay: 0.1s;
+  }
+  .text-stagger__char:nth-child(4) {
+    animation-delay: 0.15s;
+  }
+  .text-stagger__char:nth-child(5) {
+    animation-delay: 0.2s;
+  }
+  .text-stagger__char:nth-child(6) {
+    animation-delay: 0.25s;
+  }
+  .text-stagger__char:nth-child(7) {
+    animation-delay: 0.3s;
+  }
+  .text-stagger__char:nth-child(8) {
+    animation-delay: 0.35s;
+  }
+  .text-stagger__char:nth-child(9) {
+    animation-delay: 0.4s;
+  }
+  .text-stagger__char:nth-child(10) {
+    animation-delay: 0.45s;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .text-stagger__char {
+      animation: none;
+    }
+  }
+}
+
+@keyframes text-stagger-pop {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}