@ptbdynamic/plinth 0.0.0-stage → 0.1.1

package/packages/css/dist/modal.css

@@ -0,0 +1,367 @@
+/*
+ * Modal base: what the dialog (dialog.css), the sheet (sheet.css) and the drawer (drawer.css)
+ * share, written once so they can't drift apart (docs/adr/0005): the root's surface and motion,
+ * the backdrop, the scroll lock, the safe areas, the panel and the grab handle, and the header,
+ * title, description, close button, body and footer. It has no markup of its own and no class:
+ * each component keeps its own root and part classes (plinth-dialog, plinth-dialog-panel, …;
+ * plinth-sheet, plinth-sheet-panel, …), listed here in :is(). A page that loads the components
+ * one by one loads modal.css with them.
+ *
+ * The parts sit in a panel, the root's only child:
+ *   <dialog class="plinth-sheet" …>
+ *     <div class="plinth-sheet-panel">
+ *       <div class="plinth-sheet-handle" aria-hidden="true"></div>   (a bottom panel on a phone)
+ *       <div class="plinth-sheet-header">…</div>
+ *       <div class="plinth-sheet-body">…</div>
+ *       <div class="plinth-sheet-footer">…</div>                       (optional)
+ *     </div>
+ *   </dialog>
+ *
+ * The rules sit in a layer inside plinth (plinth.modal), so a component's own rules win over them
+ * whatever the order the files load in, and a project's utilities win over both.
+ *
+ * Each component sets where its root sits and how big it is, and tunes the motion and the safe
+ * area through three custom properties on the root; it never sets translate or opacity itself:
+ * - --plinth-modal-offset: where the root slides in from and back out to (a translate value;
+ *   0 0, the default, is no slide);
+ * - --plinth-modal-closed-opacity: its opacity while it opens and closes (0 fades it, 1, the
+ *   default, doesn't);
+ * - --plinth-modal-safe-area-end: env(safe-area-inset-bottom) when the root reaches the bottom
+ *   edge of the screen, so its last part clears the home indicator; initial (the default) when
+ *   it doesn't.
+ *
+ * The motion runs on the motion tokens, which drop to 0ms under prefers-reduced-motion. While a
+ * modal is open the page under it doesn't scroll (html:has(…:modal)), and it has no scrollbar
+ * gutter (scrollbar-gutter: auto, over a project's stable in an earlier layer): the top layer is
+ * never drawn in the gutter, so a gutter would leave a strip of the page beside a sheet on the end
+ * edge or the full width. Where the scrollbar takes space the page shifts by its width under the
+ * backdrop; overlay scrollbars take no space and nothing shifts. The body scrolls, with
+ * overscroll-behavior: contain; the header and footer stay put; the margins of the body's first and
+ * last child are reset, so its padding is its edge. On a phone the footer's actions share its
+ * width; from 768px up they sit at its end.
+ *
+ * A bottom panel on a phone (a sheet whose side below 768px is the bottom, a dialog with
+ * data-side-phone="bottom" that can be dismissed, and the drawer) has a grab handle, and the
+ * person drags it down to close it. The layers print the handle only there; its presence is what
+ * turns the dragging on, below 768px. Dragging is native scrolling: the root fills the screen and
+ * is a scroll-snap container, see-through, with a spacer as tall as the screen above the panel,
+ * so the browser gives the momentum and the snapping. Without script the handle shows and the
+ * close button and Escape close the panel. What the platform can't do, the layers add (a few
+ * lines, docs/adr/0002 section 6: x-init in Blade, useSwipeToClose in Vue and React):
+ * - on scrollend (scroll where it is missing), when the panel has gone off the bottom edge, they
+ *   call requestClose() (close() where it is missing), so cancel fires first, as for Escape; when
+ *   the app prevents it, the panel goes back to where it opened;
+ * - a tap on the root itself, above the panel, closes it when closedby="any", since the browser
+ *   reads that tap as one on the dialog, not its backdrop;
+ * - on toggle to open, a drawer with data-snap scrolls to that snap point (a browser that fires no
+ *   toggle on a dialog opens it at its largest).
+ * The snapping is the browser's own scrolling, and the layers' scroll is instant.
+ */
+
+@layer plinth {
+  @layer modal {
+    html:has(:is(.plinth-dialog, .plinth-sheet, .plinth-drawer):modal) {
+      overflow: hidden;
+      scrollbar-gutter: auto;
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer) {
+      --plinth-modal-offset: 0 0;
+      --plinth-modal-closed-opacity: 1;
+      --plinth-modal-safe-area-end: initial;
+
+      position: fixed;
+      box-sizing: border-box;
+      flex-direction: column;
+      max-inline-size: 100%;
+      padding: 0;
+      overflow: hidden;
+      font-family: var(--plinth-font-family-body);
+      color: var(--plinth-color-text);
+      background-color: var(--plinth-color-surface-raised);
+      border: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+      border-radius: var(--plinth-radius-container);
+      box-shadow: var(--plinth-elevation-3);
+      opacity: var(--plinth-modal-closed-opacity);
+      translate: var(--plinth-modal-offset);
+      transition:
+        translate var(--plinth-duration-normal) var(--plinth-easing-exit),
+        opacity var(--plinth-duration-normal) var(--plinth-easing-exit),
+        overlay var(--plinth-duration-normal) allow-discrete,
+        display var(--plinth-duration-normal) allow-discrete;
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)[open] {
+      display: flex;
+      opacity: 1;
+      translate: 0 0;
+      transition-timing-function: var(--plinth-easing-enter);
+    }
+
+    @starting-style {
+      :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)[open] {
+        opacity: var(--plinth-modal-closed-opacity);
+        translate: var(--plinth-modal-offset);
+      }
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)::backdrop {
+      background-color: var(--plinth-color-overlay);
+      opacity: 0;
+      transition:
+        opacity var(--plinth-duration-normal) var(--plinth-easing-standard),
+        overlay var(--plinth-duration-normal) allow-discrete,
+        display var(--plinth-duration-normal) allow-discrete;
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)[open]::backdrop {
+      opacity: 1;
+    }
+
+    @starting-style {
+      :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)[open]::backdrop {
+        opacity: 0;
+      }
+    }
+
+    /*
+     * The panel holds the parts, the root's only child. It is the column the body scrolls in;
+     * the root is the surface, except for a bottom panel on a phone (below).
+     */
+    :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel) {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      min-block-size: 0;
+      margin: 0;
+    }
+
+    :is(.plinth-dialog-header, .plinth-sheet-header, .plinth-drawer-header) {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: var(--plinth-space-1) var(--plinth-space-3);
+      align-items: center;
+      padding-block: var(--plinth-space-3);
+      padding-inline: var(--plinth-space-4) var(--plinth-space-3);
+      border-block-end: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+    }
+
+    /* With no close button, the header's padding is even. */
+    :is(.plinth-dialog-header, .plinth-sheet-header, .plinth-drawer-header):not(
+      :has(> :is(.plinth-dialog-close, .plinth-sheet-close, .plinth-drawer-close))
+    ) {
+      padding-inline-end: var(--plinth-space-4);
+    }
+
+    :is(.plinth-dialog-title, .plinth-sheet-title, .plinth-drawer-title) {
+      grid-column: 1;
+      margin: 0;
+      font-size: var(--plinth-font-size-lg);
+      font-weight: var(--plinth-font-weight-semibold);
+      line-height: var(--plinth-font-leading-tight);
+      letter-spacing: var(--plinth-font-tracking-tight);
+      overflow-wrap: anywhere;
+    }
+
+    :is(.plinth-dialog-description, .plinth-sheet-description, .plinth-drawer-description) {
+      grid-column: 1;
+      margin: 0;
+      font-size: var(--plinth-font-size-sm);
+      line-height: var(--plinth-font-leading-normal);
+      color: var(--plinth-color-text-muted);
+      overflow-wrap: anywhere;
+    }
+
+    :is(.plinth-dialog-close, .plinth-sheet-close, .plinth-drawer-close) {
+      grid-row: 1;
+      grid-column: 2;
+    }
+
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) {
+      flex: 1 1 auto;
+      min-block-size: 0;
+      padding: var(--plinth-space-4);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      font-size: var(--plinth-font-size-md);
+      line-height: var(--plinth-font-leading-normal);
+    }
+
+    /* The body's padding is its edge: the first and last child's margins don't add to it. */
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) > :first-child {
+      margin-block-start: 0;
+    }
+
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) > :last-child {
+      margin-block-end: 0;
+    }
+
+    /*
+     * A browser can focus a scrolling area that has nothing focusable in it (Chrome and Firefox
+     * do, Safari doesn't yet), so a long body of text only is better with a link or a control in
+     * it.
+     */
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body):focus-visible {
+      outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+      outline-offset: var(--plinth-focus-ring-offset-inset);
+    }
+
+    /* The last part clears the home indicator when the root reaches the bottom edge. */
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body):last-child {
+      padding-block-end: max(
+        var(--plinth-space-4),
+        var(--plinth-modal-safe-area-end, var(--plinth-space-4))
+      );
+    }
+
+    :is(.plinth-dialog-footer, .plinth-sheet-footer, .plinth-drawer-footer) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--plinth-space-2);
+      justify-content: flex-end;
+      padding-block: var(--plinth-space-3)
+        max(var(--plinth-space-3), var(--plinth-modal-safe-area-end, var(--plinth-space-3)));
+      padding-inline: var(--plinth-space-4);
+      border-block-start: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+    }
+
+    /* On a phone the footer's actions share its width. */
+    :is(.plinth-dialog-footer, .plinth-sheet-footer, .plinth-drawer-footer) > * {
+      flex: 1 1 0;
+    }
+
+    /*
+     * A bottom panel on a phone, dragged down to close: a root whose panel holds a handle (the
+     * layers print one only where the panel is on the bottom edge below 768px, and can be
+     * dismissed). The root fills the screen and is a scroll-snap container, see-through; its
+     * ::before is a spacer as tall as the screen above the panel, so scrolling it down is the
+     * panel going off the bottom edge. The flex column runs bottom up (column-reverse), so the
+     * root opens scrolled to its end, with the panel showing. Two snap positions: the panel's
+     * end on the screen's bottom edge (open), and the spacer filling the screen (closed); the
+     * layers close the dialog when the scrolling settles there. The panel is the surface, and the
+     * body hands a swipe on to the root once it is scrolled to its top.
+     */
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+      > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+    ) {
+      flex-direction: column-reverse;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scroll-snap-type: y mandatory;
+      scrollbar-width: none;
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    /* As a scrolling area the root can take focus (Chrome and Firefox), so it shows the ring. */
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+        > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      ):focus-visible {
+      outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+      outline-offset: var(--plinth-focus-ring-offset-inset);
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+        > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      )::before {
+      flex: none;
+      order: 1;
+      block-size: 100%;
+      content: '';
+      scroll-snap-align: start;
+    }
+
+    :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel):has(
+      > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+    ) {
+      flex: none;
+      max-block-size: calc(
+        100% - max(var(--plinth-space-12), env(safe-area-inset-top) + var(--plinth-space-4))
+      );
+      padding-inline: max(env(safe-area-inset-left), env(safe-area-inset-right));
+      scroll-snap-align: end;
+      background-color: var(--plinth-color-surface-raised);
+      border-block-start: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+      border-start-start-radius: var(--plinth-radius-container);
+      border-start-end-radius: var(--plinth-radius-container);
+      box-shadow: var(--plinth-elevation-3);
+    }
+
+    /*
+     * The grab handle, a short pill centred at the top; decorative, since Escape and the close
+     * button close the panel too. From 768px up it is hidden.
+     */
+    :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle) {
+      display: block;
+      flex: none;
+      align-self: center;
+      inline-size: var(--plinth-space-10);
+      block-size: var(--plinth-space-1);
+      margin-block-start: var(--plinth-space-2);
+      background-color: var(--plinth-color-border-strong);
+      border-radius: var(--plinth-radius-pill);
+    }
+
+    :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel):has(
+        > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      )
+      > :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) {
+      overscroll-behavior: auto;
+    }
+
+    @media (forced-colors: active) {
+      :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle) {
+        background-color: CanvasText;
+      }
+    }
+
+    @media (min-width: 768px) {
+      :is(.plinth-dialog-footer, .plinth-sheet-footer, .plinth-drawer-footer) > * {
+        flex: none;
+      }
+
+      /* From 768px up no panel is dragged: the root is the surface again. */
+      :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+        > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      ) {
+        flex-direction: column;
+        overflow: hidden;
+        overscroll-behavior: auto;
+        scroll-snap-type: none;
+        scrollbar-width: auto;
+        background-color: var(--plinth-color-surface-raised);
+        box-shadow: var(--plinth-elevation-3);
+      }
+
+      :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+          > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+        )::before {
+        content: none;
+      }
+
+      :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel):has(
+        > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      ) {
+        flex: 1 1 auto;
+        max-block-size: none;
+        padding-inline: 0;
+        scroll-snap-align: none;
+        background-color: transparent;
+        border-block-start: 0;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
+      :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle) {
+        display: none;
+      }
+
+      :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel):has(
+          > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+        )
+        > :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) {
+        overscroll-behavior: contain;
+      }
+    }
+  }
+}

package/packages/css/dist/pill-row.css

@@ -0,0 +1,197 @@
+/*
+ * Pill row: a row of pills for filters, segments or sub-pages.
+ *
+ * <div class="plinth-pill-row" role="group" aria-label="Status">
+ *   <button type="button" class="plinth-pill" aria-pressed="true">
+ *     <span class="plinth-pill-label">Open</span>
+ *     <span class="plinth-pill-count">12</span>
+ *   </button>
+ *   <button type="button" class="plinth-pill" aria-pressed="false">
+ *     <span class="plinth-pill-label">Closed</span>
+ *   </button>
+ * </div>
+ *
+ * The root is a <div role="group">, named by aria-label (label in Blade and Vue) or by the app's
+ * own aria-labelledby. A row of links that navigates is <nav class="plinth-pill-row"> instead,
+ * with no role (nav in Blade and Vue), and its pills are links:
+ *
+ * <a class="plinth-pill" href="…" aria-current="page"><span class="plinth-pill-label">…</span></a>
+ *
+ * Each pill is its own component (<x-plinth::pill>, PlinthPill), so the app's attributes and
+ * listeners land on the pill (ADR 2). The count is optional. plinth-pill-label has no rule of its
+ * own: it is a hook for a project's styles.
+ *
+ * States, set by the app:
+ * - selected: a button pill always prints aria-pressed, "true" or "false"; a link pill prints
+ *   aria-current="page" for the page being shown. Selected takes the selection tint
+ *   (accent-subtle, accent-text) inside a 2px accent edge (border-width.thick), where the others
+ *   have a 1px neutral one, so colour is not its only cue. A pressed button still answers hover
+ *   and press with a step on the tint (accent-subtle-hover, accent-subtle-active).
+ * - disabled: `disabled` on a <button>; on a link, no href, role="link" and aria-disabled="true".
+ * - hover only where the device can hover; the focus ring on :focus-visible.
+ *
+ * Layout: on a phone the row scrolls sideways, with no visible scrollbar, and snaps to the pills;
+ * from 768px it wraps. The row's padding keeps the focus ring and the 40px touch target of the
+ * pills inside the scrolling area, whatever --plinth-pill-height is (32px by default). A pill is
+ * at least 40px wide.
+ */
+
+@layer plinth {
+  .plinth-pill-row {
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    max-inline-size: 100%;
+    padding-block: max(
+      var(--plinth-space-1),
+      (var(--plinth-touch-target) - var(--plinth-pill-height)) / 2
+    );
+    padding-inline: var(--plinth-space-1);
+    margin: 0;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scroll-snap-type: inline proximity;
+    scroll-padding-inline: var(--plinth-space-1);
+    scrollbar-width: none;
+  }
+
+  .plinth-pill {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: none;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--plinth-touch-target);
+    min-block-size: var(--plinth-pill-height);
+    padding-block: 0;
+    padding-inline: var(--plinth-space-3);
+    margin: 0;
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-sm);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    scroll-snap-align: start;
+    background-color: transparent;
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border-strong);
+    border-radius: var(--plinth-radius-pill);
+    transition:
+      background-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      border-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      box-shadow var(--plinth-duration-fast) var(--plinth-easing-standard),
+      color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  /* A 40px touch target through an invisible hit area, as on the button (ADR 3). */
+  @media (pointer: coarse) {
+    .plinth-pill::before {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline: 0;
+      block-size: max(100%, var(--plinth-touch-target));
+      content: '';
+      translate: 0 -50%;
+    }
+  }
+
+  @media (hover: hover) {
+    a.plinth-pill[href]:not([aria-current='page']):hover,
+    button.plinth-pill:enabled:not([aria-pressed='true']):hover {
+      background-color: var(--plinth-color-surface-hover);
+    }
+  }
+
+  a.plinth-pill[href]:not([aria-current='page']):active,
+  button.plinth-pill:enabled:not([aria-pressed='true']):active {
+    background-color: var(--plinth-color-surface-sunken);
+  }
+
+  /* The border and an inset ring make the 2px edge, so selecting doesn't move the label. */
+  .plinth-pill:is([aria-pressed='true'], [aria-current='page']) {
+    color: var(--plinth-color-accent-text);
+    background-color: var(--plinth-color-accent-subtle);
+    border-color: var(--plinth-color-accent);
+    box-shadow: inset 0 0 0 calc(var(--plinth-border-width-thick) - var(--plinth-border-width-thin))
+      var(--plinth-color-accent);
+  }
+
+  /*
+   * A pressed button can be pressed again, so it answers hover and press with a step on the tint.
+   * Not in forced colours, where the tint would replace the system highlight under the label.
+   */
+  @media (hover: hover) and (forced-colors: none) {
+    button.plinth-pill:enabled[aria-pressed='true']:hover {
+      background-color: var(--plinth-color-accent-subtle-hover);
+    }
+  }
+
+  @media (forced-colors: none) {
+    button.plinth-pill:enabled[aria-pressed='true']:active {
+      background-color: var(--plinth-color-accent-subtle-active);
+    }
+  }
+
+  .plinth-pill:disabled,
+  .plinth-pill[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  .plinth-pill:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset);
+  }
+
+  /* A gap between the ring and the accent edge, so focus and selection read apart. */
+  .plinth-pill:is([aria-pressed='true'], [aria-current='page']):focus-visible {
+    outline-offset: var(--plinth-focus-ring-offset-filled);
+  }
+
+  .plinth-pill-count {
+    font-weight: var(--plinth-font-weight-regular);
+    font-variant-numeric: tabular-nums;
+    color: var(--plinth-color-text-muted);
+  }
+
+  .plinth-pill:is([aria-pressed='true'], [aria-current='page']) .plinth-pill-count {
+    color: inherit;
+  }
+
+  /* Wider screens have room: the pills wrap onto more lines instead of scrolling. */
+  @media (min-width: 768px) {
+    .plinth-pill-row {
+      flex-wrap: wrap;
+      overflow-x: visible;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .plinth-pill {
+      border-color: ButtonText;
+    }
+
+    .plinth-pill:is([aria-pressed='true'], [aria-current='page']) {
+      color: HighlightText;
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+
+    .plinth-pill:is([aria-pressed='true'], [aria-current='page']) .plinth-pill-count {
+      color: HighlightText;
+    }
+
+    .plinth-pill:disabled,
+    .plinth-pill[aria-disabled='true'] {
+      color: GrayText;
+      background-color: Canvas;
+      border-color: GrayText;
+    }
+  }
+}