nexus-shared 1.1.20 → 2.0.0

package/src/Styles/Nexus.Markdown.css

@@ -0,0 +1,265 @@
+@layer nexus.components {
+  /*
+   * Markdown editor: the text and its preview inside the editor frame (Nexus.Editor.css), which brings the bar, the
+   * height handle, and full screen.
+   */
+  .nx-md .nx-editor__body[data-mode="split"] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  .nx-md .nx-editor__body[data-mode="preview"] .nx-md__input {
+    display: none;
+  }
+
+  .nx-md .nx-md__input {
+    height: 100%;
+    min-height: 0;
+    padding: 10px var(--nx-space-3);
+    border-radius: 0;
+    line-height: 1.6;
+    resize: none;
+  }
+
+  .nx-md--mono .nx-md__input {
+    font-family: var(--nx-font-mono);
+    font-size: calc(var(--nx-field-font) - 0.5px);
+  }
+
+  .nx-md__preview {
+    min-width: 0;
+    min-height: 0;
+    padding: 10px var(--nx-space-4);
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  .nx-md .nx-editor__body[data-mode="split"] .nx-md__preview {
+    border-left: 1px solid var(--nx-border);
+  }
+
+  .nx-md__preview:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: -2px;
+  }
+
+  @container nx-editor (width < 560px) {
+    .nx-md .nx-editor__body[data-mode="split"] {
+      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .nx-md .nx-editor__body[data-mode="split"] .nx-md__preview {
+      border-top: 1px solid var(--nx-border);
+      border-left: 0;
+    }
+  }
+
+  /* The preview's thin scrollbar, as the text area's (Nexus.Input.css). */
+  .nx-md__preview::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .nx-md__preview::-webkit-scrollbar-track,
+  .nx-md__preview::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  .nx-md__preview::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-field-scrollbar) padding-box;
+  }
+
+  .nx-md__preview::-webkit-scrollbar-thumb:hover {
+    background-color: var(--nx-field-scrollbar-hover);
+  }
+
+  @supports not selector(::-webkit-scrollbar) {
+    .nx-md__preview {
+      scrollbar-width: thin;
+      scrollbar-color: var(--nx-field-scrollbar) transparent;
+    }
+  }
+
+  /*
+   * Markdown content (MarkdownView), in the editor's preview and anywhere else. Sizes are in em, so the text follows
+   * the size of the element it sits in.
+   */
+  .nx-markdown {
+    color: var(--nx-text);
+    font-size: var(--nx-text-md);
+    line-height: 1.65;
+    overflow-wrap: break-word;
+  }
+
+  .nx-markdown > :first-child {
+    margin-top: 0;
+  }
+
+  .nx-markdown > :last-child {
+    margin-bottom: 0;
+  }
+
+  .nx-markdown :is(p, ul, ol, blockquote, pre, hr, .nx-markdown__table) {
+    margin: 0 0 0.9em;
+  }
+
+  .nx-markdown :is(h1, h2, h3, h4, h5, h6) {
+    margin: 1.4em 0 0.55em;
+    font-weight: 650;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
+  }
+
+  .nx-markdown :is(h1, h2) {
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid var(--nx-border);
+  }
+
+  .nx-markdown h1 {
+    font-size: 1.6em;
+  }
+
+  .nx-markdown h2 {
+    font-size: 1.3em;
+  }
+
+  .nx-markdown h3 {
+    font-size: 1.12em;
+  }
+
+  .nx-markdown h4 {
+    font-size: 1em;
+  }
+
+  .nx-markdown h5 {
+    font-size: 0.9em;
+  }
+
+  .nx-markdown h6 {
+    color: var(--nx-text-muted);
+    font-size: 0.85em;
+  }
+
+  .nx-markdown a {
+    color: var(--nx-primary);
+    text-decoration: underline;
+    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
+    text-underline-offset: 0.18em;
+  }
+
+  .nx-markdown a:hover {
+    text-decoration-color: currentColor;
+  }
+
+  .nx-markdown :is(ul, ol) {
+    padding-left: 1.6em;
+  }
+
+  .nx-markdown li + li {
+    margin-top: 0.25em;
+  }
+
+  .nx-markdown li > :is(ul, ol) {
+    margin: 0.25em 0 0;
+  }
+
+  .nx-markdown li > p {
+    margin-bottom: 0.5em;
+  }
+
+  /* Tasks: the box sits where the bullet would. */
+  .nx-markdown__task {
+    position: relative;
+    list-style: none;
+  }
+
+  .nx-markdown__task > input {
+    position: absolute;
+    top: 0.32em;
+    left: -1.45em;
+    width: 1em;
+    height: 1em;
+    margin: 0;
+    accent-color: var(--nx-primary-solid);
+  }
+
+  .nx-markdown__task > input:enabled {
+    cursor: pointer;
+  }
+
+  .nx-markdown blockquote {
+    padding: 0 0 0 1em;
+    border-left: 3px solid var(--nx-border-strong);
+    color: var(--nx-text-muted);
+  }
+
+  .nx-markdown code {
+    padding: 0.12em 0.38em;
+    border-radius: var(--nx-radius-sm);
+    background: color-mix(in oklab, var(--nx-text) 8%, transparent);
+    font-family: var(--nx-font-mono);
+    font-size: 0.875em;
+  }
+
+  .nx-markdown pre {
+    overflow: auto;
+    padding: 0.8em 1em;
+    border-radius: var(--nx-radius);
+    background: color-mix(in oklab, var(--nx-text) 5%, transparent);
+    line-height: 1.5;
+  }
+
+  .nx-markdown pre code {
+    padding: 0;
+    background: none;
+    font-size: 0.86em;
+    white-space: pre;
+  }
+
+  .nx-markdown hr {
+    height: 0;
+    margin-block: 1.4em;
+    border: 0;
+    border-top: 1px solid var(--nx-border-strong);
+  }
+
+  .nx-markdown img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--nx-radius-sm);
+    vertical-align: middle;
+  }
+
+  .nx-markdown del {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-markdown__table {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  .nx-markdown table {
+    border-collapse: collapse;
+    font-size: 0.95em;
+  }
+
+  .nx-markdown :is(th, td) {
+    padding: 0.4em 0.8em;
+    border: 1px solid var(--nx-border);
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .nx-markdown th {
+    background: color-mix(in oklab, var(--nx-text) 4%, transparent);
+    font-weight: 600;
+  }
+
+  .nx-markdown__empty {
+    color: var(--nx-text-muted);
+    font-style: italic;
+  }
+}

package/src/Styles/Nexus.Menu.css

@@ -0,0 +1,249 @@
+@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;
+    }
+  }
+}