nexus-shared 3.1.0 → 3.2.0

package/src/Styles/Nexus.Crud.css

@@ -1,168 +1,168 @@
-@layer nexus.components {
-  /*
-   * CRUD: the table comes from Nexus.Table.css. Here: the details popup and the message for a user who may not see any
-   * list.
-   */
-  .nx-crud {
-    min-width: 0;
-  }
-
-  /* A CRUD whose table fills takes the height it is given and hands all of it to the table. */
-  .nx-crud:has(.nx-table--fill) {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: 0;
-  }
-
-  .nx-crud:has(.nx-table--fill) > .nx-table--fill {
-    flex: 1 1 auto;
-  }
-
-  /* Details: label over value, two to a line where there is room. */
-  .nx-crud-details {
-    display: flex;
-    flex-direction: column;
-    gap: var(--nx-space-3);
-  }
-
-  .nx-crud-details__list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
-    gap: var(--nx-space-4) var(--nx-space-5);
-    margin: 0;
-  }
-
-  .nx-crud-details__item {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-width: 0;
-  }
-
-  .nx-crud-details__item--wide {
-    grid-column: 1 / -1;
-  }
-
-  .nx-crud-details__label {
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
-  }
-
-  .nx-crud-details__value {
-    /* A value still to come keeps its line, so the full record lands without moving anything. */
-    min-height: 1lh;
-    margin: 0;
-    overflow-wrap: anywhere;
-    font-size: var(--nx-text-md);
-  }
-
-  /* A field only the full record has, when that record could not be loaded. */
-  .nx-crud-details__missing {
-    color: var(--nx-text-muted);
-  }
-
-  /*
-   * The details popup's footer is a form's bar (Nexus.Form.css): its status line on the left - "Loading…" for a slow
-   * record, "Not all fields loaded." for one that failed - and Edit and Close on the right. The line takes only the room
-   * the buttons leave, not a form's 14rem, so the bar stays one row on a phone and what it says never moves anything.
-   */
-  .nx-crud-details__foot > .nx-form-status {
-    flex-basis: 0;
-  }
-
-  /* No list the user may see. */
-  .nx-crud--denied {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    padding: 48px var(--nx-space-4);
-    border: 1px dashed var(--nx-border-strong);
-    border-radius: var(--nx-radius-lg);
-    text-align: center;
-  }
-
-  .nx-crud__denied-icon {
-    width: 28px;
-    height: 28px;
-    margin-bottom: 6px;
-    color: var(--nx-text-muted);
-  }
-
-  .nx-crud__denied-title {
-    margin: 0;
-    font-weight: 600;
-  }
-
-  .nx-crud__denied-detail {
-    margin: 0;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
-  }
-
-  /*
-   * A form popup with a panel beside it (`form.aside`): a preview of what will be written, a summary, help. The form
-   * is first in the DOM, so a narrow window stacks the panel under it and the keyboard still reaches the form first.
-   */
-  .nx-crud-aside {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: var(--nx-space-5);
-  }
-
-  .nx-crud-aside__main,
-  .nx-crud-aside__side {
-    min-width: 0;
-  }
-
-  /* Stacked, the panel does not take the whole window: the popup's body scrolls past it back to the form above. */
-  .nx-crud-aside__side {
-    display: flex;
-    min-height: 0;
-    max-height: 70vh;
-    flex-direction: column;
-  }
-
-  /*
-   * Side by side, where there is room for both. The popup's body stops scrolling and each column takes its own, so a
-   * long form never pushes the panel off the screen. The body is a flex row here, which is what gives its one child a
-   * height to work from: no percentage height anywhere, so it holds at every popup size.
-   */
-  @media (min-width: 1000px) {
-    .nx-popup__body:has(> .nx-crud-aside) {
-      display: flex;
-      overflow: hidden;
-    }
-
-    .nx-crud-aside {
-      flex: 1 1 auto;
-      min-width: 0;
-      /* The panel takes a share of the width, not half of it: a form has columns to fit, and code lines are short. */
-      grid-template-columns: minmax(0, 1fr) minmax(0, var(--nx-crud-aside-width, clamp(20rem, 38%, 44rem)));
-    }
-
-    /*
-     * A details popup's panel (`details.aside`) is what the popup is for, and the details beside it are a short list
-     * of fields, so the shares turn round: the fields take a column of their own width and the panel the rest.
-     */
-    .nx-crud-aside.nx-crud-aside--details {
-      grid-template-columns: minmax(0, var(--nx-crud-details-width, clamp(16rem, 30%, 26rem))) minmax(0, 1fr);
-    }
-
-    .nx-crud-aside__main {
-      overflow: auto;
-      overscroll-behavior: contain;
-      /* Focus rings reach past an input's edge; without this the scroll box cuts them off. */
-      padding: 2px;
-      margin: -2px;
-    }
-
-    /* A panel taller than the popup scrolls here, whatever it holds; one that fills the height scrolls inside itself. */
-    .nx-crud-aside__side {
-      max-height: none;
-      overflow: auto;
-      overscroll-behavior: contain;
-    }
-  }
-}
+@layer nexus.components {
+  /*
+   * CRUD: the table comes from Nexus.Table.css. Here: the details popup and the message for a user who may not see any
+   * list.
+   */
+  .nx-crud {
+    min-width: 0;
+  }
+
+  /* A CRUD whose table fills takes the height it is given and hands all of it to the table. */
+  .nx-crud:has(.nx-table--fill) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .nx-crud:has(.nx-table--fill) > .nx-table--fill {
+    flex: 1 1 auto;
+  }
+
+  /* Details: label over value, two to a line where there is room. */
+  .nx-crud-details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-3);
+  }
+
+  .nx-crud-details__list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
+    gap: var(--nx-space-4) var(--nx-space-5);
+    margin: 0;
+  }
+
+  .nx-crud-details__item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .nx-crud-details__item--wide {
+    grid-column: 1 / -1;
+  }
+
+  .nx-crud-details__label {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-crud-details__value {
+    /* A value still to come keeps its line, so the full record lands without moving anything. */
+    min-height: 1lh;
+    margin: 0;
+    overflow-wrap: anywhere;
+    font-size: var(--nx-text-md);
+  }
+
+  /* A field only the full record has, when that record could not be loaded. */
+  .nx-crud-details__missing {
+    color: var(--nx-text-muted);
+  }
+
+  /*
+   * The details popup's footer is a form's bar (Nexus.Form.css): its status line on the left - "Loading…" for a slow
+   * record, "Not all fields loaded." for one that failed - and Edit and Close on the right. The line takes only the room
+   * the buttons leave, not a form's 14rem, so the bar stays one row on a phone and what it says never moves anything.
+   */
+  .nx-crud-details__foot > .nx-form-status {
+    flex-basis: 0;
+  }
+
+  /* No list the user may see. */
+  .nx-crud--denied {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 48px var(--nx-space-4);
+    border: 1px dashed var(--nx-border-strong);
+    border-radius: var(--nx-radius-lg);
+    text-align: center;
+  }
+
+  .nx-crud__denied-icon {
+    width: 28px;
+    height: 28px;
+    margin-bottom: 6px;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-crud__denied-title {
+    margin: 0;
+    font-weight: 600;
+  }
+
+  .nx-crud__denied-detail {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  /*
+   * A form popup with a panel beside it (`form.aside`): a preview of what will be written, a summary, help. The form
+   * is first in the DOM, so a narrow window stacks the panel under it and the keyboard still reaches the form first.
+   */
+  .nx-crud-aside {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--nx-space-5);
+  }
+
+  .nx-crud-aside__main,
+  .nx-crud-aside__side {
+    min-width: 0;
+  }
+
+  /* Stacked, the panel does not take the whole window: the popup's body scrolls past it back to the form above. */
+  .nx-crud-aside__side {
+    display: flex;
+    min-height: 0;
+    max-height: 70vh;
+    flex-direction: column;
+  }
+
+  /*
+   * Side by side, where there is room for both. The popup's body stops scrolling and each column takes its own, so a
+   * long form never pushes the panel off the screen. The body is a flex row here, which is what gives its one child a
+   * height to work from: no percentage height anywhere, so it holds at every popup size.
+   */
+  @media (min-width: 1000px) {
+    .nx-popup__body:has(> .nx-crud-aside) {
+      display: flex;
+      overflow: hidden;
+    }
+
+    .nx-crud-aside {
+      flex: 1 1 auto;
+      min-width: 0;
+      /* The panel takes a share of the width, not half of it: a form has columns to fit, and code lines are short. */
+      grid-template-columns: minmax(0, 1fr) minmax(0, var(--nx-crud-aside-width, clamp(20rem, 38%, 44rem)));
+    }
+
+    /*
+     * A details popup's panel (`details.aside`) is what the popup is for, and the details beside it are a short list
+     * of fields, so the shares turn round: the fields take a column of their own width and the panel the rest.
+     */
+    .nx-crud-aside.nx-crud-aside--details {
+      grid-template-columns: minmax(0, var(--nx-crud-details-width, clamp(16rem, 30%, 26rem))) minmax(0, 1fr);
+    }
+
+    .nx-crud-aside__main {
+      overflow: auto;
+      overscroll-behavior: contain;
+      /* Focus rings reach past an input's edge; without this the scroll box cuts them off. */
+      padding: 2px;
+      margin: -2px;
+    }
+
+    /* A panel taller than the popup scrolls here, whatever it holds; one that fills the height scrolls inside itself. */
+    .nx-crud-aside__side {
+      max-height: none;
+      overflow: auto;
+      overscroll-behavior: contain;
+    }
+  }
+}

package/src/Styles/Nexus.DateTime.css

@@ -1,81 +1,81 @@
-@layer nexus.components {
-  /*
-   * Date and time picker: one popover with the calendar and the time side by side, and a footer with Now, the time
-   * zone the times are in, and Done. The time columns are as tall as the calendar, so both halves end on one line.
-   * On a narrow screen the time goes under the calendar.
-   */
-  .nx-field__control--datetime {
-    font-variant-numeric: tabular-nums;
-  }
-
-  .nx-field__action--datetime[aria-expanded="true"] {
-    color: var(--nx-field-accent);
-  }
-
-  /* Two classes: the shared panel (.nx-popover) and the time's own rules load after this file. */
-  .nx-popover.nx-datetime-popover {
-    position: fixed;
-    inset: auto;
-    padding: 0;
-    /* The component caps the height when the window has no room for the whole panel. */
-    overflow-y: auto;
-    overscroll-behavior: contain;
-  }
-
-  .nx-datetime {
-    display: grid;
-  }
-
-  .nx-datetime__body {
-    display: flex;
-  }
-
-  /* Columns as tall as the small calendar: (282px - 8px of padding) / 32px items. */
-  .nx-time.nx-datetime__time {
-    --nx-time-rows: 8.5625;
-
-    align-content: start;
-    border-left: 1px solid var(--nx-border);
-  }
-
-  /* A list of slots fills the height beside the calendar. */
-  .nx-datetime__time .nx-time__list {
-    max-height: calc(var(--nx-time-item) * var(--nx-time-rows) + var(--nx-space-2));
-  }
-
-  .nx-datetime__foot {
-    display: flex;
-    align-items: center;
-    gap: var(--nx-space-2);
-    padding: 6px var(--nx-space-2);
-    border-top: 1px solid var(--nx-border);
-  }
-
-  .nx-datetime__zone {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  @media (max-width: 479.98px) {
-    .nx-datetime__body {
-      flex-direction: column;
-    }
-
-    .nx-time.nx-datetime__time {
-      --nx-time-rows: 5;
-
-      border-top: 1px solid var(--nx-border);
-      border-left: 0;
-    }
-
-    .nx-datetime__time .nx-time__columns {
-      justify-content: center;
-    }
-  }
-}
+@layer nexus.components {
+  /*
+   * Date and time picker: one popover with the calendar and the time side by side, and a footer with Now, the time
+   * zone the times are in, and Done. The time columns are as tall as the calendar, so both halves end on one line.
+   * On a narrow screen the time goes under the calendar.
+   */
+  .nx-field__control--datetime {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-field__action--datetime[aria-expanded="true"] {
+    color: var(--nx-field-accent);
+  }
+
+  /* Two classes: the shared panel (.nx-popover) and the time's own rules load after this file. */
+  .nx-popover.nx-datetime-popover {
+    position: fixed;
+    inset: auto;
+    padding: 0;
+    /* The component caps the height when the window has no room for the whole panel. */
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .nx-datetime {
+    display: grid;
+  }
+
+  .nx-datetime__body {
+    display: flex;
+  }
+
+  /* Columns as tall as the small calendar: (282px - 8px of padding) / 32px items. */
+  .nx-time.nx-datetime__time {
+    --nx-time-rows: 8.5625;
+
+    align-content: start;
+    border-left: 1px solid var(--nx-border);
+  }
+
+  /* A list of slots fills the height beside the calendar. */
+  .nx-datetime__time .nx-time__list {
+    max-height: calc(var(--nx-time-item) * var(--nx-time-rows) + var(--nx-space-2));
+  }
+
+  .nx-datetime__foot {
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-2);
+    padding: 6px var(--nx-space-2);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  .nx-datetime__zone {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @media (max-width: 479.98px) {
+    .nx-datetime__body {
+      flex-direction: column;
+    }
+
+    .nx-time.nx-datetime__time {
+      --nx-time-rows: 5;
+
+      border-top: 1px solid var(--nx-border);
+      border-left: 0;
+    }
+
+    .nx-datetime__time .nx-time__columns {
+      justify-content: center;
+    }
+  }
+}