rapidoc 11.0.1 → 12.1.0

package/src/styles/param-list-styles.js

@@ -0,0 +1,261 @@
+import { css } from "lit";
+
+/**
+ * Parameter lists: one `<li class="param">` per parameter on a shared three-column grid
+ * (label | input | constraint). Each row is a subgrid, so columns line up across rows and
+ * every row draws its own full-width border. Stacks to one column on narrow containers.
+ */
+export default css`
+  .param-list-container {
+    container-type: inline-size;
+  }
+
+  .param-list {
+    display: grid;
+    grid-template-columns: var(--param-label-width) minmax(10rem, 1fr) minmax(0, 1.5fr);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border: 1px solid var(--border);
+    border-radius: min(var(--radius), 0.5rem);
+    /* Card surface: --card, partly transparent so a background gradient shows through */
+    background: color-mix(in srgb, var(--card) 80%, transparent);
+    font-size: var(--font-size-small);
+    line-height: calc(var(--font-size-small) + 4px);
+    word-break: break-word;
+    direction: ltr;
+  }
+
+  .param {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    column-gap: var(--param-gap);
+    row-gap: var(--param-row-gap);
+    padding: var(--param-padding);
+    margin: 0;
+
+    & + .param {
+      border-top: 1px solid var(--border);
+    }
+  }
+
+  .param-label {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    min-width: 0;
+  }
+
+  .param-input {
+    grid-column: 2;
+    min-width: 0;
+  }
+
+  /*
+   * Single-line controls match the two-line label (name over type: 2 x 1.35em + 3px). A fixed line-height
+   * keeps mono and sans controls the same height: 1.25em + 2 x 0.75em + 2px border = 2.75em + 2px.
+   * <tag-input> and file inputs reach the same height in tag-input.ts and input-styles.js.
+   */
+  .param-input :is(input[type='text'], input[type='password'], select) {
+    line-height: 1.25;
+    padding: 0.75em;
+  }
+
+  /* Room for the background-image arrow where the native select is still drawn */
+  @supports not (appearance: base-select) {
+    .param-input select {
+      padding-right: 2.25em;
+    }
+  }
+
+  /* Constraints: label/value pairs; the labels share one column, so all values start at the same place */
+  .param-constraint {
+    grid-column: 3;
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    align-content: start;
+    column-gap: var(--value-list-label-gap);
+    row-gap: var(--param-row-gap);
+    min-width: 0;
+    margin: 0;
+
+    & > dd {
+      min-width: 0;
+      margin: 0;
+    }
+  }
+
+  .param-details {
+    grid-column: 2 / -1;
+    min-width: 0;
+
+    &:not(:has(*)) {
+      display: none;
+    }
+  }
+
+  /* Without a constraint, the input takes both right-hand columns; without an input, the constraint does. */
+  .param:not(:has(.param-constraint)) .param-input,
+  .param:not(:has(.param-input)) .param-constraint {
+    grid-column: 2 / -1;
+  }
+
+  .param-name,
+  .param-type {
+    margin: 1px 0;
+    text-align: right;
+    line-height: 1.35;
+  }
+
+  .param-name {
+    color: var(--foreground);
+    font-family: var(--font-mono);
+
+    &.deprecated {
+      color: var(--destructive);
+    }
+  }
+
+  .param-required {
+    color: var(--destructive);
+  }
+
+  .param-deprecated-icon {
+    stroke: var(--destructive);
+    margin-right: -6px;
+  }
+
+  .param-type {
+    color: var(--muted-foreground);
+    font-family: var(--font-sans);
+  }
+
+  .param-constraint-label {
+    font-weight: 600;
+    color: var(--muted-foreground);
+  }
+
+  /*
+   * Label + values (Allowed values, Examples): wrapped lines hang under the first value,
+   * and each separator stays at the end of its line.
+   */
+  .value-list {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    column-gap: var(--value-list-label-gap);
+    align-items: baseline;
+  }
+
+  .value-list-items {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: var(--value-list-row-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    & > li {
+      margin: 0;
+    }
+
+    & > li:not(:last-child)::after {
+      content: '┃';
+      margin-inline: var(--value-list-gap);
+      color: var(--muted-foreground);
+    }
+  }
+
+  /*
+   * Clickable values (allowed values, examples): small mono chips that fill the parameter's input.
+   * Buttons, not links: a tinted hover instead of an underline. Read-only (disabled) when try-it is off.
+   */
+  .value-chip {
+    display: inline-block;
+    max-width: 100%;
+    margin: 0;
+    padding: 0 0.4em;
+    font: inherit;
+    font-family: var(--font-mono);
+    line-height: inherit;
+    text-align: start;
+    overflow-wrap: anywhere;
+    color: var(--foreground);
+    background: color-mix(in srgb, var(--foreground) 6%, transparent);
+    border: none;
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover {
+      color: var(--primary);
+      background: color-mix(in srgb, var(--primary) 14%, transparent);
+    }
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--focus-shadow);
+    }
+    &:disabled {
+      color: var(--foreground);
+      background: color-mix(in srgb, var(--foreground) 6%, transparent);
+      cursor: text;
+      user-select: text;
+    }
+  }
+
+  /* A list of chips is spaced apart instead of using the ┃ separators */
+  .value-list-items:has(> li > .value-chip) {
+    column-gap: 0.375em;
+
+    & > li::after {
+      content: none;
+    }
+  }
+
+  /* Long-format examples: no marker (a triangle reads as a toggle), each entry set off by a thin rule */
+  .param-example-list {
+    margin: var(--param-row-gap) 0 0;
+    padding: 0;
+    list-style: none;
+
+    & > li {
+      margin: 0 0 var(--param-row-gap);
+      padding-inline-start: var(--param-padding);
+      border-inline-start: 2px solid var(--border);
+    }
+
+    /* The accent appears only when the example can be applied (hover or keyboard focus on its link) */
+    & > li:is(:hover, :focus-within) {
+      border-inline-start-color: var(--primary);
+    }
+  }
+
+  @container (max-width: 36rem) {
+    .param-list {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .param-label,
+    .param-input,
+    .param-constraint,
+    .param-details,
+    .param:not(:has(.param-constraint)) .param-input,
+    .param:not(:has(.param-input)) .param-constraint {
+      grid-column: 1;
+      grid-row: auto;
+    }
+
+    .param-label {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+      gap: var(--param-gap);
+    }
+
+    .param-name,
+    .param-type {
+      text-align: start;
+    }
+  }
+`;

package/src/styles/schema-styles.js

@@ -0,0 +1,296 @@
+import { css } from "lit";
+
+export default css`
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+  :host {
+    container-type: inline-size;
+    interpolate-size: allow-keywords;
+  }
+  .tr {
+    display: flex;
+    flex: none;
+    width: 100%;
+    box-sizing: content-box;
+    border-bottom: 1px dotted transparent;
+    transition: max-height 0.3s ease-out;
+
+    &.expanded-descr {
+      max-height: 3000px;
+
+      @supports (interpolate-size: allow-keywords) {
+        max-height: max-content;
+      }
+    }
+  }
+  .td {
+    display: block;
+    flex: 0 0 auto;
+  }
+  .key {
+    font-family: var(--font-mono);
+    white-space: normal;
+    word-break: break-all;
+  }
+
+  .collapsed-all-descr .key {
+    overflow: hidden;
+  }
+  .key-descr {
+    font-family: var(--font-sans);
+    color: var(--muted-foreground);
+    flex-shrink: 1;
+    min-width: 0;
+    gap: 4px;
+    align-items: flex-start;
+    overflow: hidden;
+    display: flex;
+
+    /* in the description box's start padding, so descriptions line up whether or not a row shows its arrow */
+    & .descr-expand-toggle {
+      position: absolute;
+      top: 0;
+      inset-inline-start: 0;
+      width: 1em;
+      text-align: center;
+      user-select: none;
+      color: var(--foreground);
+      font-weight: 400;
+      cursor: pointer;
+      transform: rotate(45deg);
+      transition: transform 0.2s ease;
+      border-radius: 2px;
+      visibility: hidden;
+
+      &:hover {
+        color: var(--primary);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--primary);
+      }
+    }
+
+    & .descr-body {
+      flex: 1;
+      min-width: 0;
+      position: relative;
+      padding-inline-start: calc(1em + 4px);
+
+      /* the arrow comes first, so the first block is no longer :first-child for the markdown margins */
+      & > .descr-expand-toggle + * {
+        margin-top: 0;
+      }
+
+      & .item-details {
+        margin-top: 2px;
+      }
+
+      & .descr-chip {
+        display: inline-block;
+        line-break: anywhere;
+        margin-right: 8px;
+      }
+
+      /* one-line stand-in for a table, code block, HTML block or blockquote; shown only in collapsed rows */
+      & .descr-summary {
+        display: none;
+      }
+      & .descr-placeholder {
+        color: var(--muted-foreground);
+      }
+    }
+
+    /* constraint chips and array limits: "Allowed:", "Min Items:" … then the value in mono */
+    & .descr-label,
+    & b {
+      font-weight: 500;
+      font-size: var(--font-size-xs);
+      color: var(--primary);
+    }
+    & .descr-value {
+      font-family: var(--font-mono);
+      font-size: var(--font-size-small);
+      line-height: 1; /* the mono font's metrics would otherwise make the line 1px taller */
+    }
+  }
+
+  /* -90deg rather than 270deg: same direction, but it turns anticlockwise to expand and clockwise to collapse */
+  .expanded-descr .key-descr .descr-expand-toggle {
+    transform: rotate(-90deg);
+  }
+
+  /*
+   * The arrow shows when the row has hidden content, and on an expanded row so it can be collapsed again.
+   * Rows cut off for length get it from the scroll-state query below.
+   */
+  .key-descr .descr-body.has-more > .descr-expand-toggle,
+  .tr.expanded-descr .key-descr .descr-expand-toggle {
+    visibility: visible;
+  }
+
+  /* hidden, not removed, so switching to multiline doesn't shift the descriptions sideways */
+  .expanded-all-descr .tr .key-descr .descr-body > .descr-expand-toggle {
+    visibility: hidden;
+  }
+
+  /* a row expanded by clicking collapses again on click */
+  .collapsed-all-descr .tr.expanded-descr .descr-body {
+    cursor: pointer;
+  }
+
+  /* Collapsed rows: only the first block (or the chips), on one line, with a plain ellipsis (in the text color) when it is cut off */
+  .collapsed-all-descr .tr:not(.expanded-descr) .descr-body {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--foreground);
+
+    /* only rows that expand on click look clickable; cut-off rows get the pointer from the scroll-state query below */
+    &.has-more {
+      cursor: pointer;
+    }
+
+    /* the first block after the arrow */
+    & > .descr-expand-toggle + * {
+      display: inline;
+      margin: 0;
+      padding: 0;
+      white-space: inherit;
+    }
+    & > .descr-expand-toggle + :is(ul, ol) > li {
+      display: inline;
+    }
+    /* a heading on the one line reads as the description, not as a section title */
+    & > .descr-expand-toggle + :is(h1, h2, h3, h4, h5, h6) {
+      font-size: var(--font-size-description);
+      line-height: inherit;
+      font-weight: 600;
+    }
+    /* inline so a long chip is cut mid-text: an inline-block chip is dropped whole, leaving the ellipsis far from the edge */
+    & .descr-chip {
+      display: inline;
+    }
+    & > .descr-expand-toggle + :is(ul, ol) > li:not(:first-child),
+    & > .descr-expand-toggle + * ~ * {
+      display: none;
+    }
+  }
+
+  /* Where scroll-state queries work (Chromium), a row whose line is cut off shows the arrow too */
+  @supports (container-type: scroll-state) {
+    .collapsed-all-descr .tr:not(.expanded-descr) .descr-body {
+      container-type: scroll-state;
+    }
+    @container scroll-state(scrollable: inline-end) {
+      .descr-body > * {
+        cursor: pointer;
+      }
+      .descr-body > .descr-expand-toggle {
+        visibility: visible;
+      }
+    }
+  }
+
+  .xxx-of-key {
+    font-size: var(--font-size-xs);
+    line-height: calc(var(--font-size-small) + 1px);
+    padding: 1px 6px;
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    border: 1px solid var(--primary);
+    background: color-mix(in srgb, var(--primary) 12%, transparent);
+    color: var(--primary);
+    margin-bottom: 1px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .xxx-of-descr {
+    font-family: var(--font-sans);
+    color: var(--primary);
+    font-size: var(--font-size-xs);
+    margin-inline-start: 4px;
+    vertical-align: middle;
+  }
+
+  .stri,
+  .string,
+  .uri,
+  .url,
+  .byte,
+  .bina,
+  .date,
+  .pass,
+  .ipv4,
+  .ipv4,
+  .uuid,
+  .emai,
+  .host {
+    color: var(--green);
+  }
+  .inte,
+  .numb,
+  .number,
+  .int6,
+  .int3,
+  .floa,
+  .doub,
+  .deci {
+    color: var(--blue);
+  }
+  .null {
+    color: var(--destructive);
+  }
+  .bool,
+  .boolean {
+    color: var(--orange);
+  }
+  .enum {
+    color: var(--purple);
+  }
+  .cons {
+    color: var(--purple);
+  }
+  .recu {
+    color: var(--brown);
+  }
+  .toolbar {
+    display: flex;
+    width: 100%;
+    padding: 2px 0;
+    color: var(--primary);
+  }
+  .toolbar-item {
+    cursor: pointer;
+    padding: 5px 0;
+    margin: 0 2px;
+
+    &:first-of-type {
+      margin: 0 2px 0 0;
+    }
+  }
+  .schema-root-type {
+    cursor: auto;
+    color: var(--muted-foreground);
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  /* Narrow schemas (phones): a description gets a line of its own under its field instead of a column (#1074) */
+  @container (width < 500px) {
+    .tr {
+      flex-wrap: wrap;
+    }
+    .tr > .key-descr {
+      flex-basis: 100%;
+
+      &:empty {
+        display: none;
+      }
+    }
+  }
+`;

package/src/styles/tab-styles.js

@@ -0,0 +1,106 @@
+import { css } from "lit";
+
+/**
+ * Tabs: a row of text tabs over a 1px rule. The active tab's 2px underline sits on that rule.
+ * Controls that belong to the whole tab set (e.g. the media-type select) go at the end of the
+ * row with .tab-bar-end, flush with the right edge of the content below.
+ */
+export default css`
+  .tab-panel {
+    min-width: 0;
+  }
+
+  .tabs,
+  .tab-buttons {
+    display: flex;
+    align-items: center;
+    gap: 1.25em;
+    min-height: 2.5em;
+    /* The rule is an inset shadow so the active tab's underline paints over it */
+    box-shadow: inset 0 -1px 0 var(--border);
+    font-size: var(--font-size-small);
+    overflow-x: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .tab,
+  .tab-btn {
+    align-self: stretch;
+    flex: none;
+    margin: 0;
+    padding: 0 0.125em;
+    font-family: var(--font-sans);
+    font-size: inherit;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+    color: var(--muted-foreground);
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    border-radius: 0;
+    cursor: pointer;
+    transition:
+      color 0.15s ease,
+      border-color 0.15s ease;
+
+    &:hover {
+      color: var(--foreground);
+    }
+
+    &.tab-active,
+    &.active {
+      color: var(--primary);
+      border-bottom-color: var(--primary);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: -2px;
+    }
+  }
+
+  /* Pushed to the end of the tab row */
+  .tab-bar-end {
+    flex: none;
+    margin-inline-start: auto;
+    color: var(--muted-foreground);
+  }
+
+  /* Compact select in a tab row or example header: same height as .btn-sm, quieter than a form field */
+  select.select-sm {
+    max-width: 100%;
+    padding: 0.3em 0.75em;
+    font-size: var(--font-size-small);
+    background-color: transparent;
+  }
+  @supports not (appearance: base-select) {
+    select.select-sm {
+      padding-right: 2em;
+    }
+  }
+
+  /* Example picker: its own line above the example, aligned with the content's left edge */
+  .example-select {
+    display: flex;
+    width: fit-content;
+    margin-bottom: 0.75em;
+  }
+
+  .tab-content {
+    position: relative;
+    min-width: 0;
+    min-height: 50px;
+    padding-top: 0.75em;
+
+    & .toolbar-btn {
+      position: absolute;
+      top: 12px;
+      right: 8px;
+    }
+  }
+`;