nexus-shared 3.2.0 → 4.1.0

package/src/Styles/Nexus.Record.css

@@ -0,0 +1,430 @@
+@layer nexus.components {
+  /*
+   * A record's page of cards (`RecordCards`): the hero across the top, then the cards, as many to a row as have 26rem
+   * each (one on a phone), each as tall as what it holds. A card is a panel - the admin panel's edge, corner and surface -
+   * with its heading (an icon, the title and its count, a sentence, its buttons) over its body. Nothing inside a card is
+   * boxed: fields are label over value, items are rows between hairlines that reach the card's edges.
+   */
+  .nx-record {
+    display: grid;
+    gap: var(--nx-space-4);
+    min-width: 0;
+    container-type: inline-size;
+  }
+
+  .nx-record__cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
+    gap: var(--nx-space-4);
+    align-items: start;
+  }
+
+  .nx-record-card,
+  .nx-record-hero {
+    min-width: 0;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-lg);
+    background: var(--nx-surface);
+    /* A link to a card (`#emails`) leaves a little room above it. */
+    scroll-margin-block: var(--nx-space-4);
+  }
+
+  .nx-record-card--wide {
+    grid-column: 1 / -1;
+  }
+
+  .nx-record-card__head {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--nx-space-3);
+    padding: var(--nx-space-4) var(--nx-space-4) 0;
+  }
+
+  /* The card's icon on a soft tint of the theme's colour: an icon, so 3:1 is its floor. */
+  .nx-record-card__icon {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: var(--nx-control-sm);
+    height: var(--nx-control-sm);
+    border-radius: var(--nx-radius);
+    background: color-mix(in oklab, var(--nx-primary) 12%, var(--nx-surface));
+    color: var(--nx-primary);
+  }
+
+  .nx-record-card__text {
+    display: grid;
+    flex: 1 1 auto;
+    align-content: center;
+    min-width: 0;
+    /* The title's line is a button's height, so a heading with buttons and one without line up. */
+    min-height: var(--nx-control-sm);
+  }
+
+  /*
+   * The title and its sentence, then the buttons. The text keeps at least 12rem beside them; a narrow card (a phone, two
+   * buttons, a long label) puts the buttons on a line of their own under the text, at its start, never squeezing the
+   * title to a few words a line.
+   */
+  .nx-record-card__main {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--nx-space-2) var(--nx-space-3);
+    min-width: 0;
+  }
+
+  .nx-record-card__main > .nx-record-card__text {
+    flex: 1 1 12rem;
+  }
+
+  /* A title alone needs less: its buttons stay beside it down to 8rem. */
+  .nx-record-card__main > .nx-record-card__text:not(:has(> .nx-record-card__lead)) {
+    flex-basis: 8rem;
+  }
+
+  .nx-record-card__main > .nx-record-card__actions {
+    justify-content: flex-start;
+  }
+
+  .nx-record-card__title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0 var(--nx-space-2);
+    margin: 0;
+    font-size: var(--nx-text-lg);
+    font-weight: 600;
+    line-height: var(--nx-control-sm);
+    overflow-wrap: anywhere;
+  }
+
+  /* Focused from code only (the focus coming home after a popup), never by Tab: no ring of its own. */
+  .nx-record-card__title:focus {
+    outline: none;
+  }
+
+  /* Its own line height, so the title's line is the same with a count and without one (while the list is read). */
+  .nx-record-card__count {
+    color: var(--nx-text-muted);
+    line-height: 1;
+    font-size: var(--nx-text-sm);
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-record-card__lead {
+    margin: 0 0 var(--nx-space-1);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    line-height: 1.45;
+  }
+
+  .nx-record-card__actions {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--nx-space-2);
+  }
+
+  .nx-record-card__body {
+    min-width: 0;
+    padding: var(--nx-space-3) var(--nx-space-4) var(--nx-space-4);
+  }
+
+  .nx-record-card__empty {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-record-card__message {
+    margin: 0 0 var(--nx-space-3);
+    font-size: var(--nx-text-md);
+  }
+
+  /* A list reaches the card's edges, its last row as close to the foot as the heading is to the first. */
+  .nx-record-card--items > .nx-record-card__body {
+    padding: var(--nx-space-2) 0 var(--nx-space-1);
+  }
+
+  .nx-record-card--items > .nx-record-card__body > :is(.nx-record-card__empty, .nx-record__failed) {
+    margin: var(--nx-space-1) var(--nx-space-4) var(--nx-space-3);
+  }
+
+  /* A card of the page's own stacks what it is given at the cards' own gap, a paragraph's margins dropped. */
+  .nx-record-card--content > .nx-record-card__body {
+    display: grid;
+    gap: var(--nx-space-3);
+    align-content: start;
+  }
+
+  .nx-record-card--content > .nx-record-card__body > * {
+    margin-block: 0;
+  }
+
+  /* While a source loads: the table's bone, on the line it holds (the table draws it as a block, so two classes). */
+  .nx-table__bone.nx-record__bone {
+    display: inline-block;
+    max-width: 100%;
+    vertical-align: baseline;
+  }
+
+  /* A mark held while it is read: a tag's size, the bone's tint. */
+  .nx-record__bone-tag {
+    width: 7rem;
+    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
+  }
+
+  .nx-record__held {
+    display: grid;
+  }
+
+  /* A held line is a line box of the text it stands for (its font and line height), its bone on the baseline. */
+  .nx-record__held-line,
+  .nx-record-item__text > .nx-record__held-line {
+    display: block;
+  }
+
+  /* The hero */
+
+  .nx-record-hero {
+    --nx-record-hero-picture: 5.5rem;
+
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-4);
+    padding: var(--nx-space-4) var(--nx-space-5);
+  }
+
+  .nx-record-hero__picture {
+    display: flex;
+    flex: none;
+  }
+
+  .nx-record-hero__text {
+    display: grid;
+    flex: 1 1 auto;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .nx-record-hero__title {
+    margin: 0;
+    font-size: var(--nx-text-xl);
+    font-weight: 650;
+    letter-spacing: -0.01em;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-record-hero__line {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-record-hero__marks {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: var(--nx-space-1);
+  }
+
+  .nx-record-hero > .nx-record-card__actions {
+    align-self: flex-start;
+  }
+
+  /* Fields: label over value, as many to a row as have 11rem; long text and chips across. */
+
+  .nx-record-fields {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
+    gap: var(--nx-space-3) var(--nx-space-4);
+    margin: 0;
+  }
+
+  .nx-record-field {
+    min-width: 0;
+  }
+
+  .nx-record-field--wide {
+    grid-column: 1 / -1;
+  }
+
+  .nx-record-field__label {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  /* One line's height while it loads too, so nothing moves when the values come. */
+  .nx-record-field__value {
+    min-height: 1.45em;
+    margin: 0;
+    font-size: var(--nx-text-md);
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-record-field__empty {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-record-field__lines {
+    white-space: pre-line;
+  }
+
+  .nx-record-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin: 2px 0 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Items: rows between hairlines, a picture or an icon, the name and its marks, lines, and icon buttons on the right. */
+
+  .nx-record-items {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-record-item {
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-3);
+    min-width: 0;
+    padding: var(--nx-space-2) var(--nx-space-4);
+  }
+
+  .nx-record-item + .nx-record-item {
+    border-top: 1px solid var(--nx-border);
+  }
+
+  .nx-record-item__media {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: var(--nx-control-md);
+    height: var(--nx-control-md);
+    overflow: hidden;
+    border-radius: 50%;
+  }
+
+  .nx-record-item__media--icon {
+    border-radius: var(--nx-radius);
+    background: color-mix(in oklab, var(--nx-text) 6%, var(--nx-surface));
+    color: var(--nx-text-muted);
+  }
+
+  .nx-record-item__media--held {
+    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
+  }
+
+  .nx-record-item__text {
+    display: grid;
+    flex: 1 1 auto;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  /* At least a mark's height, so a row is as tall with marks as without, and as its held row. */
+  .nx-record-item__title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px var(--nx-space-2);
+    min-height: calc(var(--nx-text-xs) * 1.6 + 2px);
+    margin: 0;
+    font-size: var(--nx-text-md);
+    font-weight: 500;
+    line-height: 1.45;
+  }
+
+  .nx-record-item__name {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-record-item__marks {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .nx-record-item__line {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-record-item__actions {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 2px;
+  }
+
+  /* A popup's step: its sentence over the form, and the button that stays on it under. */
+
+  .nx-record-step {
+    display: grid;
+    gap: var(--nx-space-3);
+  }
+
+  .nx-record-step__lead {
+    font-size: var(--nx-text-md);
+    line-height: 1.5;
+  }
+
+  .nx-record-step__lead > p {
+    margin: 0;
+  }
+
+  .nx-record-step__also {
+    margin: 0;
+  }
+
+  /* A narrow page (a phone, a popup): the hero's picture smaller, its padding the cards'. */
+  @container (max-width: 34rem) {
+    .nx-record-hero {
+      --nx-record-hero-picture: 4rem;
+
+      gap: var(--nx-space-3);
+      padding: var(--nx-space-4);
+    }
+
+    .nx-record-hero__title {
+      font-size: var(--nx-text-lg);
+    }
+
+    .nx-record-card__head {
+      padding: var(--nx-space-3) var(--nx-space-3) 0;
+    }
+
+    .nx-record-card__body {
+      padding: var(--nx-space-3);
+    }
+
+    .nx-record-item {
+      gap: var(--nx-space-2);
+      padding-inline: var(--nx-space-3);
+    }
+
+    .nx-record-item__media {
+      width: var(--nx-control-sm);
+      height: var(--nx-control-sm);
+    }
+  }
+}

package/src/Styles/Nexus.Tab.Buttons.css

@@ -105,25 +105,25 @@
     transition: color var(--nx-duration);
   }
 
-  .nx-tabs__option:hover:not(:has(:checked, :disabled)) {
+  .nx-tabs__option:hover:not(:has(:checked, :disabled), [aria-selected="true"], :disabled) {
     background: var(--nx-tabs-hover);
     color: var(--nx-text);
   }
 
-  .nx-tabs__option:has(:checked) {
+  .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
     color: var(--nx-tabs-active-color);
     cursor: default;
   }
 
-  .nx-tabs__option:has(:checked) .nx-icon {
+  .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) .nx-icon {
     color: var(--nx-tabs-active-icon);
   }
 
-  .nx-tabs__option:has(:focus-visible) {
+  .nx-tabs__option:is(:has(:focus-visible), :focus-visible) {
     box-shadow: var(--nx-focus-ring);
   }
 
-  .nx-tabs__option:has(:disabled) {
+  .nx-tabs__option:is(:has(:disabled), :disabled) {
     cursor: not-allowed;
     opacity: 0.45;
   }
@@ -178,7 +178,7 @@
       padding 240ms cubic-bezier(0.2, 0, 0, 1);
   }
 
-  .nx-tabs--labels-selected .nx-tabs__option:has(:checked) {
+  .nx-tabs--labels-selected .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
     padding: 0 var(--nx-space-3);
     background: var(--nx-tabs-indicator);
     box-shadow:
@@ -187,7 +187,7 @@
   }
 
   /* In a full-width group, the selected option takes the free space. */
-  .nx-tabs--labels-selected.nx-tabs--block .nx-tabs__option:has(:checked) {
+  .nx-tabs--labels-selected.nx-tabs--block .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
     flex: 1 1 auto;
   }
 
@@ -202,7 +202,7 @@
       margin 240ms cubic-bezier(0.2, 0, 0, 1);
   }
 
-  .nx-tabs--labels-selected .nx-tabs__option:has(:checked) .nx-tabs__label {
+  .nx-tabs--labels-selected .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) .nx-tabs__label {
     grid-template-columns: 1fr;
     margin-inline-start: 6px;
   }
@@ -239,9 +239,10 @@
    * its own, exactly as the one choice's indicator is, and an option that is not chosen sits flat on the track. The
    * options wrap onto more rows when they do not fit, each row as tall as a one-row track's options, so a picker of
    * 26 letters is one track of several rows rather than a line that runs off a phone. A one-character option is
-   * square, so a row of letters lines up.
+   * square, so a row of letters lines up. A choice group drawn as tabs (`RadioGroup design="tabs"`, `nx-tabs--wrap`)
+   * is drawn the same way: its choice lives in the inputs, not in a value the track could slide an indicator to.
    */
-  .nx-tabs--multiple {
+  :is(.nx-tabs--multiple, .nx-tabs--wrap) {
     --nx-tabs-option-height: calc(var(--nx-tabs-height) - 2 * var(--nx-tabs-pad) - 2px);
 
     display: inline-flex;
@@ -251,26 +252,30 @@
     height: auto;
   }
 
-  .nx-tabs--multiple.nx-tabs--block {
+  :is(.nx-tabs--multiple, .nx-tabs--wrap).nx-tabs--block {
     display: flex;
   }
 
-  .nx-tabs--multiple .nx-tabs__option {
+  :is(.nx-tabs--multiple, .nx-tabs--wrap) .nx-tabs__option {
     flex: 0 0 auto;
     min-width: var(--nx-tabs-option-height);
     height: var(--nx-tabs-option-height);
   }
 
-  /* A chosen option can be unchosen, so it keeps the pointer, and it keeps its raised look under the pointer too. */
-  .nx-tabs--multiple .nx-tabs__option:has(:checked) {
+  /* A chosen option keeps its raised look under the pointer too. */
+  :is(.nx-tabs--multiple, .nx-tabs--wrap) .nx-tabs__option:has(:checked) {
     background: var(--nx-tabs-indicator);
     box-shadow:
       inset 0 0 0 1px var(--nx-tabs-indicator-border),
       var(--nx-tabs-indicator-shadow);
+  }
+
+  /* One of several can be unchosen, so it keeps the pointer. */
+  .nx-tabs--multiple .nx-tabs__option:has(:checked) {
     cursor: pointer;
   }
 
-  .nx-tabs--multiple .nx-tabs__option:has(:checked):has(:focus-visible) {
+  :is(.nx-tabs--multiple, .nx-tabs--wrap) .nx-tabs__option:has(:checked):has(:focus-visible) {
     box-shadow:
       inset 0 0 0 1px var(--nx-tabs-indicator-border),
       var(--nx-focus-ring);
@@ -278,7 +283,7 @@
 
   /* A finger needs more than a small button's 22px: on a touch screen every option is a medium control's height, square at the least. */
   @media (pointer: coarse) {
-    .nx-tabs--multiple {
+    :is(.nx-tabs--multiple, .nx-tabs--wrap) {
       --nx-tabs-option-height: var(--nx-control-md);
     }
   }
@@ -340,21 +345,21 @@
       transform 200ms cubic-bezier(0.2, 0, 0, 1);
   }
 
-  .nx-tabs--list .nx-tabs__option:has(:checked) {
+  .nx-tabs--list .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
     background: var(--nx-tabs-list-selected);
   }
 
   /* A list of several choices: a chosen row can be unchosen, so it keeps the pointer. */
-  .nx-tabs--list:not([role="radiogroup"]) .nx-tabs__option:has(:checked) {
+  .nx-tabs--list:not([role="radiogroup"], [role="tablist"]) .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
     cursor: pointer;
   }
 
-  .nx-tabs--list .nx-tabs__option:has(:checked)::before {
+  .nx-tabs--list .nx-tabs__option:is(:has(:checked), [aria-selected="true"])::before {
     opacity: 1;
     transform: none;
   }
 
-  .nx-tabs--list .nx-tabs__option:has(:checked) .nx-tabs__text {
+  .nx-tabs--list .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) .nx-tabs__text {
     font-weight: 600;
   }
 
@@ -404,7 +409,7 @@
     --nx-tabs-active-icon: var(--nx-primary);
   }
 
-  .nx-tabs--list.nx-tabs--primary .nx-tabs__option:has(:checked) .nx-tabs__badge {
+  .nx-tabs--list.nx-tabs--primary .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) .nx-tabs__badge {
     background: var(--nx-primary-solid);
     color: var(--nx-primary-text);
   }
@@ -423,8 +428,68 @@
     --nx-tabs-list-gap: 12px;
   }
 
+  /*
+   * Tabs (`Tabs`): the same options as buttons with role="tab", marked by aria-selected rather than a checked radio.
+   * Only what a button brings of its own is taken away; the ring is the options' own box-shadow.
+   */
+  button.nx-tabs__option {
+    margin: 0;
+    border: 0;
+    background: none;
+    font-family: inherit;
+    outline: none;
+  }
+
+  [role="tablist"] .nx-tabs__option[aria-selected="true"] {
+    cursor: default;
+  }
+
+  /*
+   * design="auto": the list, until its container (a popup's workspace) is narrower than 720px; there the same rows lie
+   * in one strip that scrolls sideways, the bar under the chosen one. The strip keeps room for the focus ring, which a
+   * scrolling box would cut off.
+   */
+  @container (max-width: 719.98px) {
+    .nx-tabs--auto {
+      grid-auto-columns: max-content;
+      grid-auto-flow: column;
+      padding: 3px;
+      overflow-x: auto;
+      overscroll-behavior-x: contain;
+      scrollbar-width: none;
+    }
+
+    .nx-tabs--auto .nx-tabs__option {
+      white-space: nowrap;
+    }
+
+    .nx-tabs--auto .nx-tabs__option::before {
+      top: auto;
+      right: 10px;
+      bottom: 0;
+      left: 10px;
+      width: auto;
+      height: 3px;
+      transform: scaleX(0.3);
+    }
+
+    .nx-tabs--auto .nx-tabs__description {
+      display: none;
+    }
+  }
+
+  /* A tab's panel: it takes the focus when it holds nothing that does, so its ring is drawn inside it. */
+  .nx-tab-panel {
+    min-width: 0;
+  }
+
+  .nx-tab-panel:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: -2px;
+  }
+
   [data-nx-motion="reduce"] .nx-tabs__indicator,
-  [data-nx-motion="reduce"] .nx-tabs--multiple .nx-tabs__option,
+  [data-nx-motion="reduce"] :is(.nx-tabs--multiple, .nx-tabs--wrap) .nx-tabs__option,
   [data-nx-motion="reduce"] .nx-tabs--labels-selected :is(.nx-tabs__option, .nx-tabs__label),
   [data-nx-motion="reduce"] .nx-tabs--list .nx-tabs__option::before {
     transition: none;