@veluai/velu 0.1.13 → 0.1.14

package/runtime/velu-ui/components/nav-select.css

@@ -1,157 +1,157 @@
-/* NavSelect — dropdown switcher for product / version / language.
-   Shares the visual recipe with the docs drawer's doc-select. All
-   values are tokens; light/dark via [data-theme]. */
-
-.velu-nav-select {
-  position: relative;
-  display: inline-block;
-}
-
-.velu-nav-select__btn {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--s-3);
-  inline-size: 100%;
-  padding-block: var(--s-3);
-  padding-inline: var(--s0);
-  background: var(--page-bg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  font: inherit;
-  font-size: var(--f-h5);
-  color: var(--text-color);
-  text-align: start;
-  cursor: pointer;
-  transition: border-color 0.12s ease;
-}
-.velu-nav-select__btn:hover {
-  border-color: var(--accent-color);
-}
-
-/* Bare variant — borderless text trigger (e.g. the language switcher
-   at the header's bottom-right, GitBook-style). */
-.velu-nav-select--bare .velu-nav-select__btn {
-  inline-size: auto;
-  padding-inline: 0;
-  background: transparent;
-  border: 0;
-  font-size: var(--f-h6);
-}
-.velu-nav-select--bare .velu-nav-select__btn:hover {
-  color: var(--accent-color);
-}
-
-/* Language (or other) code shown uppercase before the name. Kept at
-   text color (not muted) — distinguished by case + size, not grey. */
-.velu-nav-select__code {
-  flex: none;
-  color: var(--text-color);
-  text-transform: uppercase;
-  font-size: 0.85em;
-  letter-spacing: 0.02em;
-}
-
-/* Compact variant — the version pill sitting next to the brand. */
-.velu-nav-select--sm .velu-nav-select__btn {
-  padding-block: var(--s-5);
-  padding-inline: var(--s-2);
-  font-size: var(--f-h6);
-}
-
-.velu-nav-select__btn-icon {
-  display: inline-flex;
-  flex: none;
-  color: var(--text-color);
-}
-.velu-nav-select__value {
-  flex: 1;
-  min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.velu-nav-select__chev {
-  flex: none;
-  inline-size: 1em;
-  block-size: 1em;
-  stroke-width: 1;
-  color: var(--text-color);
-  transition: transform 0.18s ease;
-}
-.velu-nav-select[data-open='true'] .velu-nav-select__chev {
-  transform: rotate(180deg);
-}
-
-/* Menu — anchored below the button, fades + slides in. Always in DOM
-   so the transition runs both directions; visibility delayed so the
-   closed menu isn't focusable. */
-.velu-nav-select__menu {
-  position: absolute;
-  inset-block-start: calc(100% + var(--s-3));
-  inset-inline-start: 0;
-  min-inline-size: 100%;
-  margin: 0;
-  padding-block: var(--s-2);
-  padding-inline: 0;
-  list-style: none;
-  background: var(--page-bg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  box-shadow: 0 var(--s-2) var(--s1)
-    color-mix(in srgb, #000 12%, 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-nav-select[data-open='true'] .velu-nav-select__menu {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-  pointer-events: auto;
-  transition:
-    opacity 0.15s ease,
-    transform 0.15s ease,
-    visibility 0s;
-}
-/* Right-align the menu when the trigger sits at the trailing edge
-   (e.g. the language switcher at the header's bottom-right). */
-.velu-nav-select--align-end .velu-nav-select__menu {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
-}
-
-.velu-nav-select__item {
-  display: flex;
-  align-items: center;
-  gap: var(--s-3);
-  padding-block: var(--s-2);
-  padding-inline: var(--s0);
-  font-size: var(--f-h5);
-  color: var(--text-color);
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-.velu-nav-select__item:hover {
-  background: var(--surface-color);
-  color: var(--accent-color);
-}
-.velu-nav-select__item--active {
-  color: var(--accent-color);
-}
-.velu-nav-select__item-icon {
-  display: inline-flex;
-  flex: none;
-  color: var(--text-color);
-}
-.velu-nav-select__item:hover .velu-nav-select__item-icon,
-.velu-nav-select__item--active .velu-nav-select__item-icon {
-  color: var(--accent-color);
-}
+/* NavSelect — dropdown switcher for product / version / language.
+   Shares the visual recipe with the docs drawer's doc-select. All
+   values are tokens; light/dark via [data-theme]. */
+
+.velu-nav-select {
+  position: relative;
+  display: inline-block;
+}
+
+.velu-nav-select__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  inline-size: 100%;
+  padding-block: var(--s-3);
+  padding-inline: var(--s0);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--f-h5);
+  color: var(--text-color);
+  text-align: start;
+  cursor: pointer;
+  transition: border-color 0.12s ease;
+}
+.velu-nav-select__btn:hover {
+  border-color: var(--accent-color);
+}
+
+/* Bare variant — borderless text trigger (e.g. the language switcher
+   at the header's bottom-right, GitBook-style). */
+.velu-nav-select--bare .velu-nav-select__btn {
+  inline-size: auto;
+  padding-inline: 0;
+  background: transparent;
+  border: 0;
+  font-size: var(--f-h6);
+}
+.velu-nav-select--bare .velu-nav-select__btn:hover {
+  color: var(--accent-color);
+}
+
+/* Language (or other) code shown uppercase before the name. Kept at
+   text color (not muted) — distinguished by case + size, not grey. */
+.velu-nav-select__code {
+  flex: none;
+  color: var(--text-color);
+  text-transform: uppercase;
+  font-size: 0.85em;
+  letter-spacing: 0.02em;
+}
+
+/* Compact variant — the version pill sitting next to the brand. */
+.velu-nav-select--sm .velu-nav-select__btn {
+  padding-block: var(--s-5);
+  padding-inline: var(--s-2);
+  font-size: var(--f-h6);
+}
+
+.velu-nav-select__btn-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--text-color);
+}
+.velu-nav-select__value {
+  flex: 1;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.velu-nav-select__chev {
+  flex: none;
+  inline-size: 1em;
+  block-size: 1em;
+  stroke-width: 1;
+  color: var(--text-color);
+  transition: transform 0.18s ease;
+}
+.velu-nav-select[data-open='true'] .velu-nav-select__chev {
+  transform: rotate(180deg);
+}
+
+/* Menu — anchored below the button, fades + slides in. Always in DOM
+   so the transition runs both directions; visibility delayed so the
+   closed menu isn't focusable. */
+.velu-nav-select__menu {
+  position: absolute;
+  inset-block-start: calc(100% + var(--s-3));
+  inset-inline-start: 0;
+  min-inline-size: 100%;
+  margin: 0;
+  padding-block: var(--s-2);
+  padding-inline: 0;
+  list-style: none;
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 var(--s-2) var(--s1)
+    color-mix(in srgb, #000 12%, 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-nav-select[data-open='true'] .velu-nav-select__menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    visibility 0s;
+}
+/* Right-align the menu when the trigger sits at the trailing edge
+   (e.g. the language switcher at the header's bottom-right). */
+.velu-nav-select--align-end .velu-nav-select__menu {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+}
+
+.velu-nav-select__item {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding-block: var(--s-2);
+  padding-inline: var(--s0);
+  font-size: var(--f-h5);
+  color: var(--text-color);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.velu-nav-select__item:hover {
+  background: var(--surface-color);
+  color: var(--accent-color);
+}
+.velu-nav-select__item--active {
+  color: var(--accent-color);
+}
+.velu-nav-select__item-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--text-color);
+}
+.velu-nav-select__item:hover .velu-nav-select__item-icon,
+.velu-nav-select__item--active .velu-nav-select__item-icon {
+  color: var(--accent-color);
+}