@getvitops/core 0.1.0

package/css/patterns/copy.css

@@ -0,0 +1,82 @@
+/**
+ * Copy — copy-to-clipboard button CSS shell migrated from old-css-lib. The
+ * button, mask icons and success/"Copied!" affordance are pure CSS; the
+ * clipboard write + success-state toggle arrive with its Lit component (which
+ * adds `.copy--success`).
+ */
+
+.copy {
+  --_size: var(--copy-size, 2.5rem);
+  --_p: var(--p-copy, var(--p-control, var(--p-default)));
+  --_br: var(--br-copy, var(--br-control, var(--br-default)));
+  --_ds: var(--ds-copy, var(--ds-control, var(--ds-default)));
+  --_b: var(--b-copy, var(--b-control, var(--b-default)));
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  .copy__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--_size);
+    min-block-size: var(--_size);
+    padding: var(--_p);
+    background: transparent;
+    border: var(--_b);
+    border-radius: var(--_br);
+    box-shadow: var(--_ds);
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      transform 0.1s ease;
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--copy-focus-color, var(--color-brand-primary-l));
+      outline-offset: 2px;
+    }
+  }
+
+  .copy__icon {
+    inline-size: 1.25em;
+    block-size: 1.25em;
+    background-color: currentColor;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z'/%3E%3C/svg%3E");
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+  }
+
+  .copy__icon--success {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
+  }
+
+  .copy__tooltip {
+    position: absolute;
+    inset-block-end: 100%;
+    inset-inline-start: 50%;
+    translate: -50% 0;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    border-radius: 0.25rem;
+    white-space: nowrap;
+    background: var(--color-surface-xxd);
+    color: var(--color-surface-xxl);
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.15s ease,
+      visibility 0.15s ease;
+  }
+
+  &.copy--success .copy__tooltip {
+    opacity: 1;
+    visibility: visible;
+  }
+}

package/css/patterns/details.css

@@ -0,0 +1,87 @@
+/**
+ * Details — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Details — native <details> with animated ::details-content ───────────── */
+details,
+.details {
+  --_content-margin: var(--p-details-content, var(--p-details-group, var(--p-default)));
+
+  > summary {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+    &::marker {
+      content: none;
+    }
+    &:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+  }
+
+  > summary > .details-icon {
+    flex-shrink: 0;
+    margin-inline-start: auto;
+    transition: rotate 0.3s ease;
+  }
+
+  &[open] > summary > .details-icon {
+    rotate: var(--_details-icon-rotate, 90deg);
+  }
+
+  &::details-content {
+    display: block;
+    overflow: hidden;
+    block-size: 0;
+    opacity: 0;
+    transition:
+      block-size 0.3s ease,
+      opacity 0.3s ease,
+      content-visibility 0.3s allow-discrete;
+  }
+
+  > summary + * {
+    margin-block-start: var(--_content-margin);
+  }
+
+  > :not(summary) {
+    margin-inline: var(--_content-margin);
+
+    &:last-child {
+      margin-block-end: var(--_content-margin);
+    }
+  }
+
+  &[open]::details-content {
+    block-size: auto;
+    opacity: 1;
+  }
+
+  &.details--marker-start > summary > .details-icon {
+    order: -1;
+    margin-inline-start: 0;
+    margin-inline-end: auto;
+  }
+
+  /* Plus/minus variant — toggle two sibling icon elements */
+  &.details--plus-minus > summary > .details-icon--minus {
+    display: none;
+  }
+  &.details--plus-minus[open] > summary > .details-icon--plus {
+    display: none;
+  }
+  &.details--plus-minus[open] > summary > .details-icon--minus {
+    display: inline-flex;
+  }
+  &.details--plus-minus[open] > summary > .details-icon {
+    rotate: none;
+  }
+}

package/css/patterns/dialog.css

@@ -0,0 +1,99 @@
+/**
+ * Dialog — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Dialog — native <dialog> ──────────────────────────────────────────────── */
+/* Keep the `:not(:popover-open)` guard so a <dialog popover> opened via the
+   Popover API (which sets :popover-open, NOT the [open] attribute) still shows. */
+dialog:not([open]):not(:popover-open) {
+  display: none;
+}
+
+dialog.dialog {
+  --_p: var(--p-dialog, var(--p-dialog-group, var(--p-default)));
+  --_b: var(--b-dialog, var(--b-dialog-group, var(--b-default)));
+  --_br: var(--br-dialog, var(--br-dialog-group, var(--br-default)));
+  --_ds: var(--ds-dialog, var(--ds-dialog-group, var(--ds-default)));
+
+  /* inset:0 + margin:auto centres the dialog in the top layer. Needed because the
+     generic [popover] rule resets inset to auto (for anchored popovers), which
+     would otherwise leave a popover-opened <dialog> pinned to the top-left. */
+  inset: 0;
+  margin: auto;
+  padding: var(--_p);
+  border: var(--_b);
+  border-radius: var(--_br);
+  box-shadow: var(--_ds);
+  background: var(--color-surface-xxl);
+  color: var(--color-surface-xxd);
+  max-block-size: calc(100vh - 2rem);
+
+  &::backdrop {
+    backdrop-filter: blur(4px);
+  }
+
+  &[open] {
+    animation: dialog-enter 0.3s ease;
+  }
+  &[open]::backdrop {
+    animation: dialog-backdrop-enter 0.3s ease;
+  }
+
+  .dialog__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-block-end: 1rem;
+  }
+
+  .dialog__title {
+    margin: 0;
+  }
+
+  .dialog__close {
+    padding: 0.5rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    opacity: 0.5;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .dialog__body {
+    overflow-y: auto;
+  }
+
+  .dialog__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-block-start: 1.5rem;
+  }
+}
+
+@keyframes dialog-enter {
+  from {
+    opacity: 0;
+    scale: 0.95;
+    translate: 0 -1rem;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes dialog-backdrop-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/css/patterns/drawer.css

@@ -0,0 +1,108 @@
+/**
+ * Drawer — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Drawer — slide-in panel (works as <dialog> or [popover]) ──────────────── */
+.drawer {
+  --_p: var(--p-drawer, var(--p-drawer-group, var(--p-default)));
+  --_b: var(--b-drawer, var(--b-drawer-group, var(--b-default)));
+  --_ds: var(--ds-drawer, var(--ds-drawer-group, var(--ds-default)));
+
+  position: var(--_drawer-position, fixed);
+  position-anchor: var(--_drawer-anchor);
+  margin: 0;
+  padding: var(--_p);
+  border: var(--_b);
+  box-shadow: var(--_ds);
+  background: var(--color-surface-xxl);
+  color: var(--color-surface-xxd);
+  max-inline-size: none;
+  max-block-size: none;
+
+  &::backdrop {
+    backdrop-filter: blur(4px);
+  }
+
+  &,
+  &.drawer--left {
+    inset-block: 0;
+    inset-inline-start: 0;
+    block-size: 100dvh;
+    inline-size: min(100dvi, var(--drawer-max-inline-size, 280px));
+    border-radius: 0;
+
+    &[open],
+    &:popover-open {
+      animation: drawer-slide-in-left 0.3s ease;
+    }
+  }
+
+  &.drawer--right {
+    inset-block: 0;
+    inset-inline-end: 0;
+    inset-inline-start: auto;
+    inline-size: min(100dvi, var(--drawer-max-inline-size, 280px));
+
+    &[open],
+    &:popover-open {
+      animation: drawer-slide-in-right 0.3s ease;
+    }
+  }
+
+  &.drawer--top {
+    inset-block-start: 0;
+    inset-inline: 0;
+    block-size: min(100dvb, var(--drawer-max-block-size, 100dvb));
+
+    &[open],
+    &:popover-open {
+      animation: drawer-slide-in-top 0.3s ease;
+    }
+  }
+
+  &.drawer--bottom {
+    inset-block-end: 0;
+    inset-block-start: auto;
+    inset-inline: 0;
+    block-size: min(100dvb, var(--drawer-max-block-size, 100dvb));
+
+    &[open],
+    &:popover-open {
+      animation: drawer-slide-in-bottom 0.3s ease;
+    }
+  }
+}
+
+@keyframes drawer-slide-in-left {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 0 0;
+  }
+}
+@keyframes drawer-slide-in-right {
+  from {
+    translate: 100% 0;
+  }
+  to {
+    translate: 0 0;
+  }
+}
+@keyframes drawer-slide-in-top {
+  from {
+    translate: 0 -100%;
+  }
+  to {
+    translate: 0 0;
+  }
+}
+@keyframes drawer-slide-in-bottom {
+  from {
+    translate: 0 100%;
+  }
+  to {
+    translate: 0 0;
+  }
+}

package/css/patterns/dropdown.css

@@ -0,0 +1,45 @@
+/**
+ * Dropdown — pattern partial migrated from old-css-lib.
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ */
+
+/* ── Dropdown — hover/click popover menu, no scrim ─────────────────────────── */
+.dropdown--show-on-hover,
+.split-link--show-on-hover {
+  position: relative;
+
+  /* Override the [popover] display:none (specificity 0,2,1 > 0,1,2) */
+  > [popover]:not(:popover-open) {
+    display: block;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    padding-block-start: var(--dropdown-gap, 0.5rem);
+    transition:
+      opacity 0.2s ease,
+      translate 0.2s ease,
+      visibility 0.2s allow-discrete;
+    inset: auto;
+    margin: 0;
+  }
+
+  &:hover > [popover]:not(:popover-open) {
+    opacity: 1;
+    visibility: visible;
+    translate: 0;
+    pointer-events: auto;
+    z-index: var(--z-tier-overlay);
+  }
+
+  > [popover]:popover-open {
+    opacity: 1;
+    visibility: visible;
+    translate: 0;
+    pointer-events: auto;
+    padding-block-start: var(--dropdown-gap, 0.5rem);
+  }
+
+  > [popover]::backdrop {
+    background: transparent !important;
+  }
+}