@veluai/velu 0.2.13 → 0.2.15

package/runtime/velu-ui/components/context-menu.css

@@ -1,173 +1,173 @@
-/* ContextMenu — the per-page agent/IDE action bar (eyebrow + Copy Page
-   split-button + dropdown). Mirrors NavSelect's dropdown recipe; all values are
-   tokens, light/dark via [data-theme]. */
-
-.velu-context-bar {
-  /* Tight to the page title below — the eyebrow reads as a kicker on the
-     title, not a detached row. Negative pull cancels the h1's line-height
-     leading so the cap-height of the title sits right under the eyebrow. */
-  margin-block-end: calc(-1 * var(--s-5));
-}
-
-/* Section/group label, top-left — small, uppercase, accent (matches the
-   crimson eyebrow in the reference). */
-.velu-context-bar__eyebrow {
-  min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--f-h6);
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--accent-color);
-}
-
-.velu-context-menu {
-  position: relative;
-  flex: none;
-}
-
-/* The split button: "Copy Page" + a divider + a chevron toggle, joined as one
-   segmented control. */
-.velu-context-menu__split {
-  display: inline-flex;
-  align-items: stretch;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  background: var(--page-bg);
-  overflow: hidden;
-  transition: border-color 0.12s ease;
-}
-.velu-context-menu__split:hover {
-  border-color: var(--accent-color);
-}
-
-.velu-context-menu__copy,
-.velu-context-menu__toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--s-3);
-  background: transparent;
-  border: 0;
-  font: inherit;
-  font-size: var(--f-h6);
-  color: var(--text-color);
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-.velu-context-menu__copy {
-  padding-block: var(--s-3);
-  padding-inline: var(--s-1);
-  font-weight: 500;
-}
-.velu-context-menu__toggle {
-  padding-inline: var(--s-3);
-  border-inline-start: var(--border-width) solid var(--border-color);
-}
-.velu-context-menu__copy:hover,
-.velu-context-menu__toggle:hover {
-  background: var(--surface-color);
-  color: var(--accent-color);
-}
-.velu-context-menu__copy-icon {
-  display: inline-flex;
-  flex: none;
-}
-.velu-context-menu__toggle svg {
-  transition: transform 0.18s ease;
-}
-.velu-context-menu[data-open='true'] .velu-context-menu__toggle svg {
-  transform: rotate(180deg);
-}
-
-/* Menu — anchored to the trailing edge below the button; fades + slides in.
-   Always in DOM so the transition runs both ways; visibility delayed so the
-   closed menu isn't focusable. */
-.velu-context-menu__menu {
-  position: absolute;
-  inset-block-start: calc(100% + var(--s-3));
-  inset-inline-end: 0;
-  min-inline-size: 17rem;
-  margin: 0;
-  padding-block: var(--s-3);
-  padding-inline: 0.5rem; /* 8px */
-  list-style: none;
-  background: var(--page-bg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: 0.75rem; /* 12px */
-  box-shadow: 0 var(--s-1) var(--s2) color-mix(in srgb, #000 14%, transparent);
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-0.25rem);
-  pointer-events: none;
-  transition:
-    opacity 0.15s ease,
-    transform 0.15s ease,
-    visibility 0s linear 0.15s;
-  z-index: 40;
-}
-.velu-context-menu[data-open='true'] .velu-context-menu__menu {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-  pointer-events: auto;
-  transition:
-    opacity 0.15s ease,
-    transform 0.15s ease,
-    visibility 0s;
-}
-
-.velu-context-menu__item {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--s-2);
-  inline-size: 100%;
-  padding-block: var(--s-3);
-  padding-inline: var(--s-3);
-  border-radius: var(--radius-sm);
-  background: transparent;
-  border: 0;
-  font: inherit;
-  text-align: start;
-  color: var(--text-color);
-  cursor: pointer;
-  transition: background 0.12s ease;
-}
-.velu-context-menu__item:hover {
-  background: var(--surface-color);
-}
-
-.velu-context-menu__item-icon {
-  display: inline-flex;
-  flex: none;
-  margin-block-start: 0.1em;
-  color: var(--muted-color);
-}
-.velu-context-menu__item:hover .velu-context-menu__item-icon {
-  color: var(--accent-color);
-}
-
-.velu-context-menu__item-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.1em;
-  min-inline-size: 0;
-}
-.velu-context-menu__item-title {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--s-4);
-  font-size: var(--f-h6);
-  font-weight: 500;
-  color: var(--text-color);
-}
-.velu-context-menu__item-ext {
-  flex: none;
-  color: var(--muted-color);
-}
-.velu-context-menu__item-desc {
-  font-size: var(--f-h6);
-  line-height: var(--lh-tight, 1.3);
-  color: var(--muted-color);
-}
+/* ContextMenu — the per-page agent/IDE action bar (eyebrow + Copy Page
+   split-button + dropdown). Mirrors NavSelect's dropdown recipe; all values are
+   tokens, light/dark via [data-theme]. */
+
+.velu-context-bar {
+  /* Tight to the page title below — the eyebrow reads as a kicker on the
+     title, not a detached row. Negative pull cancels the h1's line-height
+     leading so the cap-height of the title sits right under the eyebrow. */
+  margin-block-end: calc(-1 * var(--s-5));
+}
+
+/* Section/group label, top-left — small, uppercase, accent (matches the
+   crimson eyebrow in the reference). */
+.velu-context-bar__eyebrow {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--f-h6);
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--accent-color);
+}
+
+.velu-context-menu {
+  position: relative;
+  flex: none;
+}
+
+/* The split button: "Copy Page" + a divider + a chevron toggle, joined as one
+   segmented control. */
+.velu-context-menu__split {
+  display: inline-flex;
+  align-items: stretch;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  background: var(--page-bg);
+  overflow: hidden;
+  transition: border-color 0.12s ease;
+}
+.velu-context-menu__split:hover {
+  border-color: var(--accent-color);
+}
+
+.velu-context-menu__copy,
+.velu-context-menu__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  background: transparent;
+  border: 0;
+  font: inherit;
+  font-size: var(--f-h6);
+  color: var(--text-color);
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.velu-context-menu__copy {
+  padding-block: var(--s-3);
+  padding-inline: var(--s-1);
+  font-weight: 500;
+}
+.velu-context-menu__toggle {
+  padding-inline: var(--s-3);
+  border-inline-start: var(--border-width) solid var(--border-color);
+}
+.velu-context-menu__copy:hover,
+.velu-context-menu__toggle:hover {
+  background: var(--surface-color);
+  color: var(--accent-color);
+}
+.velu-context-menu__copy-icon {
+  display: inline-flex;
+  flex: none;
+}
+.velu-context-menu__toggle svg {
+  transition: transform 0.18s ease;
+}
+.velu-context-menu[data-open='true'] .velu-context-menu__toggle svg {
+  transform: rotate(180deg);
+}
+
+/* Menu — anchored to the trailing edge below the button; fades + slides in.
+   Always in DOM so the transition runs both ways; visibility delayed so the
+   closed menu isn't focusable. */
+.velu-context-menu__menu {
+  position: absolute;
+  inset-block-start: calc(100% + var(--s-3));
+  inset-inline-end: 0;
+  min-inline-size: 17rem;
+  margin: 0;
+  padding-block: var(--s-3);
+  padding-inline: 0.5rem; /* 8px */
+  list-style: none;
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: 0.75rem; /* 12px */
+  box-shadow: 0 var(--s-1) var(--s2) color-mix(in srgb, #000 14%, transparent);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-0.25rem);
+  pointer-events: none;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    visibility 0s linear 0.15s;
+  z-index: 40;
+}
+.velu-context-menu[data-open='true'] .velu-context-menu__menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    visibility 0s;
+}
+
+.velu-context-menu__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-2);
+  inline-size: 100%;
+  padding-block: var(--s-3);
+  padding-inline: var(--s-3);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  border: 0;
+  font: inherit;
+  text-align: start;
+  color: var(--text-color);
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+.velu-context-menu__item:hover {
+  background: var(--surface-color);
+}
+
+.velu-context-menu__item-icon {
+  display: inline-flex;
+  flex: none;
+  margin-block-start: 0.1em;
+  color: var(--muted-color);
+}
+.velu-context-menu__item:hover .velu-context-menu__item-icon {
+  color: var(--accent-color);
+}
+
+.velu-context-menu__item-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1em;
+  min-inline-size: 0;
+}
+.velu-context-menu__item-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-4);
+  font-size: var(--f-h6);
+  font-weight: 500;
+  color: var(--text-color);
+}
+.velu-context-menu__item-ext {
+  flex: none;
+  color: var(--muted-color);
+}
+.velu-context-menu__item-desc {
+  font-size: var(--f-h6);
+  line-height: var(--lh-tight, 1.3);
+  color: var(--muted-color);
+}