nexus-shared 2.0.0 → 3.1.0

package/src/Styles/Nexus.Menu.css

@@ -1,249 +1,237 @@
-@layer nexus.components {
-  /*
-   * Menu: a list of actions in a native popover. It shares the .nx-popover panel (border, raised background, shadow)
-   * with tight padding, so items sit close to the edge. Hover and keyboard focus highlight an item the same way,
-   * because focus follows the pointer.
-   */
-  .nx-menu {
-    --nx-menu-item-height: 32px;
-    --nx-menu-font: var(--nx-text-md);
-    --nx-menu-pad-x: var(--nx-space-2);
-
-    position: fixed;
-    inset: auto;
-    min-width: 180px;
-    max-width: min(360px, calc(100% - 16px));
-    max-height: calc(100vh - 16px);
-    overflow: hidden auto;
-    overscroll-behavior: contain;
-    padding: 4px;
-    outline: none;
-  }
-
-  .nx-menu:popover-open {
-    animation: nx-menu-in 120ms ease-out;
-  }
-
-  @keyframes nx-menu-in {
-    from {
-      opacity: 0;
-      transform: translateY(-4px);
-    }
-  }
-
-  .nx-menu--sm {
-    --nx-menu-item-height: 28px;
-    --nx-menu-font: var(--nx-text-sm);
-  }
-
-  .nx-menu--lg {
-    --nx-menu-item-height: 38px;
-    --nx-menu-font: var(--nx-text-lg);
-    --nx-menu-pad-x: 10px;
-  }
-
-  .nx-menu__item {
-    display: flex;
-    align-items: center;
-    gap: var(--nx-space-2);
-    width: 100%;
-    min-height: var(--nx-menu-item-height);
-    margin: 0;
-    padding: 5px var(--nx-menu-pad-x);
-    border: 0;
-    border-radius: var(--nx-radius);
-    background: none;
-    color: var(--nx-text);
-    font: inherit;
-    font-size: var(--nx-menu-font);
-    line-height: 1.35;
-    text-align: left;
-    text-decoration: none;
-    cursor: pointer;
-    user-select: none;
-    outline: none;
-  }
-
-  .nx-menu__item:is(:hover, :focus) {
-    background: var(--nx-surface-hover);
-  }
-
-  .nx-menu__item[aria-disabled="true"] {
-    background: none;
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* The icon column: the same width on every item, empty on items without an icon. */
-  .nx-menu__icon {
-    display: grid;
-    flex-shrink: 0;
-    place-items: center;
-    width: 1.15em;
-    height: 1.15em;
-  }
-
-  .nx-menu__item .nx-icon {
-    width: 1.15em;
-    height: 1.15em;
-    color: var(--nx-text-muted);
-    vertical-align: 0;
-  }
-
-  .nx-menu__item--danger {
-    color: var(--nx-danger);
-  }
-
-  .nx-menu__item--danger .nx-icon {
-    color: inherit;
-  }
-
-  .nx-menu__item--danger:is(:hover, :focus) {
-    background: var(--nx-danger-soft);
-  }
-
-  /* The check column of radio and checkbox menus: every item keeps the space, the checked one shows the mark. */
-  .nx-menu__check {
-    display: grid;
-    flex-shrink: 0;
-    place-items: center;
-    width: 16px;
-    color: var(--nx-primary);
-  }
-
-  .nx-menu__check .nx-icon {
-    color: inherit;
-  }
-
-  .nx-menu__body {
-    display: grid;
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  .nx-menu__label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .nx-menu__description {
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-    line-height: 1.4;
-  }
-
-  .nx-menu__shortcut {
-    flex-shrink: 0;
-    margin-left: auto;
-    padding-left: var(--nx-space-4);
-    color: var(--nx-text-subtle);
-    font-family: var(--nx-font);
-    font-size: var(--nx-text-xs);
-    font-weight: 500;
-  }
-
-  .nx-menu__separator {
-    height: 1px;
-    margin: 4px 0;
-    background: var(--nx-border);
-  }
-
-  .nx-menu__heading {
-    padding: 6px var(--nx-menu-pad-x) 2px;
-    color: var(--nx-text-subtle);
-    font-size: var(--nx-text-xs);
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-  }
-
-  /* The context menu's wrapper takes no space, so it can wrap a table or a grid cell. */
-  .nx-context-target {
-    display: contents;
-  }
-
-  /*
-   * Split button: the main action and an arrow that opens the alternatives. Two buttons joined at the middle,
-   * with one shared edge; on primary and danger, whose borders are invisible, a faint line marks the split.
-   */
-  .nx-split {
-    --nx-split-divider: transparent;
-
-    display: inline-flex;
-    align-items: stretch;
-    vertical-align: middle;
-  }
-
-  .nx-split--block {
-    display: flex;
-    width: 100%;
-  }
-
-  .nx-split--block .nx-split__main {
-    flex: 1 1 auto;
-  }
-
-  .nx-split--primary {
-    --nx-split-divider: color-mix(in oklab, var(--nx-primary-text) 30%, transparent);
-  }
-
-  .nx-split--danger {
-    --nx-split-divider: color-mix(in oklab, var(--nx-danger-text) 30%, transparent);
-  }
-
-  .nx-split .nx-split__main {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  .nx-split .nx-split__toggle {
-    width: calc(var(--nx-btn-height) - 6px);
-    margin-left: -1px;
-    padding: 0;
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-    box-shadow:
-      inset 1px 0 0 var(--nx-split-divider),
-      var(--nx-shadow-sm);
-  }
-
-  .nx-split .nx-split__toggle:disabled {
-    box-shadow: inset 1px 0 0 var(--nx-split-divider);
-  }
-
-  /* Ghost halves have no shadow; a faint line still marks the split. */
-  .nx-split--ghost {
-    --nx-split-divider: var(--nx-border);
-  }
-
-  .nx-split--ghost .nx-split__toggle {
-    box-shadow: inset 1px 0 0 var(--nx-split-divider);
-  }
-
-  /* The hovered or focused half paints over the shared edge. */
-  .nx-split .nx-btn:is(:hover, :focus-visible) {
-    position: relative;
-    z-index: 1;
-  }
-
-  .nx-split .nx-split__toggle .nx-icon {
-    transition: transform 160ms ease;
-  }
-
-  .nx-split .nx-split__toggle[aria-expanded="true"] .nx-icon {
-    transform: rotate(180deg);
-  }
-
-  .nx-split__menu {
-    min-width: 240px;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .nx-menu:popover-open,
-    .nx-split .nx-split__toggle .nx-icon {
-      animation: none;
-      transition: none;
-    }
-  }
-}
+@layer nexus.components {
+  /*
+   * Menu: a list of actions in a native popover. It shares the .nx-popover panel (border, raised background, shadow)
+   * with tight padding, so items sit close to the edge. Hover and keyboard focus highlight an item the same way,
+   * because focus follows the pointer.
+   */
+  .nx-menu {
+    --nx-menu-item-height: var(--nx-row);
+    --nx-menu-font: var(--nx-text-md);
+    --nx-menu-pad-x: var(--nx-space-2);
+    --nx-popover-pad: 4px;
+
+    position: fixed;
+    inset: auto;
+    min-width: 180px;
+    max-width: min(360px, calc(100% - 16px));
+    outline: none;
+  }
+
+  /* The items scroll inside the panel (`.nx-popover__scroll`): a block, so a long menu scrolls instead of squeezing
+     its items the way flex children would. */
+  .nx-menu__list {
+    display: block;
+  }
+
+  .nx-menu--sm {
+    --nx-menu-item-height: calc(var(--nx-row) - 4px);
+    --nx-menu-font: var(--nx-text-sm);
+  }
+
+  .nx-menu--lg {
+    --nx-menu-item-height: calc(var(--nx-row) + 6px);
+    --nx-menu-font: var(--nx-text-lg);
+    --nx-menu-pad-x: 10px;
+  }
+
+  .nx-menu__item {
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-2);
+    width: 100%;
+    min-height: var(--nx-menu-item-height);
+    margin: 0;
+    padding: 5px var(--nx-menu-pad-x);
+    border: 0;
+    border-radius: var(--nx-radius);
+    background: none;
+    color: var(--nx-text);
+    font: inherit;
+    font-size: var(--nx-menu-font);
+    line-height: 1.35;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+  }
+
+  .nx-menu__item:is(:hover, :focus) {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-menu__item[aria-disabled="true"] {
+    background: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* The icon column: the same width on every item, empty on items without an icon. */
+  .nx-menu__icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 1.15em;
+    height: 1.15em;
+  }
+
+  .nx-menu__item .nx-icon {
+    width: 1.15em;
+    height: 1.15em;
+    color: var(--nx-text-muted);
+    vertical-align: 0;
+  }
+
+  .nx-menu__item--danger {
+    color: var(--nx-danger);
+  }
+
+  .nx-menu__item--danger .nx-icon {
+    color: inherit;
+  }
+
+  .nx-menu__item--danger:is(:hover, :focus) {
+    background: var(--nx-danger-soft);
+  }
+
+  /* The check column of radio and checkbox menus: every item keeps the space, the checked one shows the mark. */
+  .nx-menu__check {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 16px;
+    color: var(--nx-primary);
+  }
+
+  .nx-menu__check .nx-icon {
+    color: inherit;
+  }
+
+  .nx-menu__body {
+    display: grid;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .nx-menu__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-menu__description {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    line-height: 1.4;
+  }
+
+  .nx-menu__shortcut {
+    flex-shrink: 0;
+    margin-left: auto;
+    padding-left: var(--nx-space-4);
+    color: var(--nx-text-subtle);
+    font-family: var(--nx-font);
+    font-size: var(--nx-text-xs);
+    font-weight: 500;
+  }
+
+  .nx-menu__separator {
+    height: 1px;
+    margin: 4px 0;
+    background: var(--nx-border);
+  }
+
+  .nx-menu__heading {
+    padding: 6px var(--nx-menu-pad-x) 2px;
+    color: var(--nx-text-subtle);
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  /* The context menu's wrapper takes no space, so it can wrap a table or a grid cell. */
+  .nx-context-target {
+    display: contents;
+  }
+
+  /*
+   * Split button: the main action and an arrow that opens the alternatives. Two buttons joined at the middle,
+   * with one shared edge; on primary and danger, whose borders are invisible, a faint line marks the split.
+   */
+  .nx-split {
+    --nx-split-divider: transparent;
+
+    display: inline-flex;
+    align-items: stretch;
+    vertical-align: middle;
+  }
+
+  .nx-split--block {
+    display: flex;
+    width: 100%;
+  }
+
+  .nx-split--block .nx-split__main {
+    flex: 1 1 auto;
+  }
+
+  .nx-split--primary {
+    --nx-split-divider: color-mix(in oklab, var(--nx-primary-text) 30%, transparent);
+  }
+
+  .nx-split--danger {
+    --nx-split-divider: color-mix(in oklab, var(--nx-danger-text) 30%, transparent);
+  }
+
+  .nx-split .nx-split__main {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .nx-split .nx-split__toggle {
+    width: calc(var(--nx-btn-height) - 6px);
+    margin-left: -1px;
+    padding: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    box-shadow:
+      inset 1px 0 0 var(--nx-split-divider),
+      var(--nx-shadow-sm);
+  }
+
+  .nx-split .nx-split__toggle:disabled {
+    box-shadow: inset 1px 0 0 var(--nx-split-divider);
+  }
+
+  /* Ghost halves have no shadow; a faint line still marks the split. */
+  .nx-split--ghost {
+    --nx-split-divider: var(--nx-border);
+  }
+
+  .nx-split--ghost .nx-split__toggle {
+    box-shadow: inset 1px 0 0 var(--nx-split-divider);
+  }
+
+  /* The hovered or focused half paints over the shared edge. */
+  .nx-split .nx-btn:is(:hover, :focus-visible) {
+    position: relative;
+    z-index: 1;
+  }
+
+  .nx-split .nx-split__toggle .nx-icon {
+    transition: transform 160ms ease;
+  }
+
+  .nx-split .nx-split__toggle[aria-expanded="true"] .nx-icon {
+    transform: rotate(180deg);
+  }
+
+  .nx-split__menu {
+    min-width: 240px;
+  }
+
+  [data-nx-motion="reduce"] .nx-split .nx-split__toggle .nx-icon {
+    transition: none;
+  }
+}