@simai-studio/view 1.0.0 → 1.2.0

package/dist/smart/view-flow/css/view-flow.css

@@ -0,0 +1,203 @@
+@layer sf.reset, sf.tokens, sf.base, sf.utilities, sf.components, sf.overrides, sf.states;
+@layer sf.components {
+  /* sf-view-flow. The host is display: contents; .sf-view-flow
+     is the block the flow places, as wide as the flow. Every value is a
+     Framework token. The public variables (component.json css-variables) are
+     read here and never set, on the block or any ancestor (public-variables.v1):
+       --sf-view-flow-radius            the block's corner
+       --sf-view-flow-inset             its padding
+       --sf-view-flow-gap               between its rows
+       --sf-view-flow-background-color  its ground
+       --sf-view-flow-border-color      its edge
+     The --sf-view-flow--* names are the internal layer they feed. */
+  .sf-view-flow {
+    --sf-view-flow--radius: var(--sf-view-flow-radius, var(--sf-radius-2));
+    --sf-view-flow--inset: var(--sf-view-flow-inset, var(--sf-space-1\/2) var(--sf-space-1));
+    --sf-view-flow--gap: var(--sf-view-flow-gap, var(--sf-space-1\/2));
+    --sf-view-flow--fill: var(--sf-view-flow-background-color, var(--sf-surface-0));
+    --sf-view-flow--edge: var(--sf-view-flow-border-color, var(--sf-outline-variant));
+    --sf-view-flow--label-size: var(--sf-label-medium--size);
+    --sf-view-flow--label-height: var(--sf-label-medium--height);
+    display: flex;
+    flex-direction: column;
+    gap: var(--sf-view-flow--gap);
+    box-sizing: border-box;
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+    padding: var(--sf-view-flow--inset);
+    border: var(--sf-px) solid var(--sf-view-flow--edge);
+    border-radius: var(--sf-view-flow--radius);
+    background: var(--sf-view-flow--fill);
+    color: var(--sf-on-surface);
+    font-family: var(--sf-text--family);
+    font-size: var(--sf-text--size);
+    line-height: var(--sf-text--height);
+  }
+  .sf-view-flow--size-1-2 {
+    font-size: var(--sf-label-large--size);
+    line-height: var(--sf-label-large--height);
+  }
+  .sf-view-flow__heading {
+    margin: 0;
+    font-weight: var(--sf-font-weight-bold);
+  }
+  .sf-view-flow__description {
+    color: var(--sf-on-surface-variant);
+    font-size: var(--sf-label-large--size);
+    line-height: var(--sf-label-large--height);
+  }
+  .sf-view-flow__groups {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sf-view-flow--gap);
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-flow__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sf-space-1\/3);
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-flow__group-label {
+    margin: 0;
+    color: var(--sf-on-surface-variant);
+    font-size: var(--sf-view-flow--label-size);
+    line-height: var(--sf-view-flow--label-height);
+    font-weight: var(--sf-font-weight-medium);
+  }
+  /* A collapsible group's label is a plain button: the words and a chevron
+     that turns when the group is closed. */
+  .sf-view-flow__toggle {
+    align-self: flex-start;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-family: inherit;
+    cursor: pointer;
+  }
+  .sf-view-flow__toggle sf-icon {
+    transition: -webkit-transform var(--sf-duration-normal);
+    transition: transform var(--sf-duration-normal);
+    transition: transform var(--sf-duration-normal), -webkit-transform var(--sf-duration-normal);
+  }
+  .sf-view-flow__group[data-collapsed] .sf-view-flow__toggle sf-icon {
+    -webkit-transform: rotate(-90deg);
+            transform: rotate(-90deg);
+  }
+  /* Two columns: a half-width field pairs up with the next, a full one takes
+     the row. */
+  .sf-view-flow__fields {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    grid-gap: var(--sf-space-1\/2) var(--sf-space-1);
+    gap: var(--sf-space-1\/2) var(--sf-space-1);
+  }
+  .sf-view-flow__fields[hidden] {
+    display: none;
+  }
+  .sf-view-flow__field--full {
+    grid-column: 1/-1;
+  }
+  .sf-view-flow__label {
+    font-size: var(--sf-view-flow--label-size);
+    line-height: var(--sf-view-flow--label-height);
+  }
+  .sf-view-flow__value {
+    min-height: var(--sf-view-flow--label-height);
+    min-block-size: var(--sf-view-flow--label-height);
+    word-wrap: anywhere;
+  }
+  /* While the block takes an answer a value is one control, and it fills its
+     field: in a flex row a control keeps its intrinsic width, and a Smart
+     element is display: contents, so its painted root is a grandchild that
+     flex: 1 on the box's children never reaches (sf-view-properties found the
+     same for its full-width fields). As a block it fills. */
+  .sf-view-flow--editing .sf-view-flow__value {
+    display: block;
+  }
+  .sf-view-flow__error {
+    font-size: var(--sf-view-flow--label-size);
+    line-height: var(--sf-view-flow--label-height);
+  }
+  .sf-view-flow__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--sf-space-1\/3);
+  }
+  .sf-view-flow__status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sf-space-1\/4);
+    margin: 0;
+    color: var(--sf-on-surface-variant);
+    font-size: var(--sf-view-flow--label-size);
+    line-height: var(--sf-view-flow--label-height);
+  }
+  .sf-view-flow__status.focus-visible {
+    outline-offset: var(--sf-space-1\/4);
+  }
+  .sf-view-flow__status:focus-visible {
+    outline-offset: var(--sf-space-1\/4);
+  }
+  .sf-view-flow__status--error {
+    color: var(--sf-error);
+  }
+  .sf-view-flow--accepted .sf-view-flow__status {
+    color: var(--sf-on-success-container);
+  }
+  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-flow__actions {
+    margin-left: auto;
+  }
+  @supports not (margin-inline-start: initial) {
+  html:not([dir="rtl"]) .sf-view-flow__actions {
+    margin-left: auto;
+    }
+  }
+  .sf-view-flow__actions:where(:dir(ltr)) {
+    margin-left: auto;
+  }
+  _:-ms-input-placeholder, [dir="rtl"] .sf-view-flow__actions {
+    margin-right: auto;
+  }
+  @supports not (margin-inline-start: initial) {
+  [dir="rtl"] .sf-view-flow__actions {
+    margin-right: auto;
+    }
+  }
+  .sf-view-flow__actions:where(:dir(rtl)) {
+    margin-right: auto;
+  }
+  .sf-view-flow__actions {
+    display: flex;
+    gap: var(--sf-space-1\/3);
+    -webkit-margin-start: auto;
+            margin-inline-start: auto;
+  }
+  .sf-view-flow__actions[hidden] {
+    display: none;
+  }
+  /* A narrow screen: one column, and the answers share the width. A media
+     query and not a container query: containing the block's inline size would
+     make a block as wide as its content (in a message bubble) collapse. */
+  @media (max-width: 479px) {
+    .sf-view-flow__fields {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    .sf-view-flow__field--half {
+      grid-column: 1/-1;
+    }
+    .sf-view-flow__actions {
+      display: grid;
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+      width: 100%;
+      inline-size: 100%;
+    }
+  }
+}

package/dist/smart/view-flow/css/view-flow.min.css

@@ -0,0 +1,2 @@
+@layer sf.reset, sf.tokens, sf.base, sf.utilities, sf.components, sf.overrides, sf.states;
+@layer sf.components{.sf-view-flow{--sf-view-flow--radius: var(--sf-view-flow-radius, var(--sf-radius-2));--sf-view-flow--inset: var(--sf-view-flow-inset, var(--sf-space-1\/2) var(--sf-space-1));--sf-view-flow--gap: var(--sf-view-flow-gap, var(--sf-space-1\/2));--sf-view-flow--fill: var(--sf-view-flow-background-color, var(--sf-surface-0));--sf-view-flow--edge: var(--sf-view-flow-border-color, var(--sf-outline-variant));--sf-view-flow--label-size: var(--sf-label-medium--size);--sf-view-flow--label-height: var(--sf-label-medium--height);display:flex;flex-direction:column;gap:var(--sf-view-flow--gap);box-sizing:border-box;width:100%;inline-size:100%;min-width:0;min-inline-size:0;padding:var(--sf-view-flow--inset);border:var(--sf-px) solid var(--sf-view-flow--edge);border-radius:var(--sf-view-flow--radius);background:var(--sf-view-flow--fill);color:var(--sf-on-surface);font-family:var(--sf-text--family);font-size:var(--sf-text--size);line-height:var(--sf-text--height)}.sf-view-flow--size-1-2{font-size:var(--sf-label-large--size);line-height:var(--sf-label-large--height)}.sf-view-flow__heading{margin:0;font-weight:var(--sf-font-weight-bold)}.sf-view-flow__description{color:var(--sf-on-surface-variant);font-size:var(--sf-label-large--size);line-height:var(--sf-label-large--height)}.sf-view-flow__groups{display:flex;flex-direction:column;gap:var(--sf-view-flow--gap);min-width:0;min-inline-size:0}.sf-view-flow__group{display:flex;flex-direction:column;gap:var(--sf-space-1\/3);min-width:0;min-inline-size:0}.sf-view-flow__group-label{margin:0;color:var(--sf-on-surface-variant);font-size:var(--sf-view-flow--label-size);line-height:var(--sf-view-flow--label-height);font-weight:var(--sf-font-weight-medium)}.sf-view-flow__toggle{align-self:flex-start;padding:0;border:0;background:none;font-family:inherit;cursor:pointer}.sf-view-flow__toggle sf-icon{transition:-webkit-transform var(--sf-duration-normal);transition:transform var(--sf-duration-normal);transition:transform var(--sf-duration-normal), -webkit-transform var(--sf-duration-normal)}.sf-view-flow__group[data-collapsed] .sf-view-flow__toggle sf-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.sf-view-flow__fields{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);grid-gap:var(--sf-space-1\/2) var(--sf-space-1);gap:var(--sf-space-1\/2) var(--sf-space-1)}.sf-view-flow__fields[hidden]{display:none}.sf-view-flow__field--full{grid-column:1/-1}.sf-view-flow__label{font-size:var(--sf-view-flow--label-size);line-height:var(--sf-view-flow--label-height)}.sf-view-flow__value{min-height:var(--sf-view-flow--label-height);min-block-size:var(--sf-view-flow--label-height);word-wrap:anywhere}.sf-view-flow--editing .sf-view-flow__value{display:block}.sf-view-flow__error{font-size:var(--sf-view-flow--label-size);line-height:var(--sf-view-flow--label-height)}.sf-view-flow__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sf-space-1\/3)}.sf-view-flow__status{display:inline-flex;align-items:center;gap:var(--sf-space-1\/4);margin:0;color:var(--sf-on-surface-variant);font-size:var(--sf-view-flow--label-size);line-height:var(--sf-view-flow--label-height)}.sf-view-flow__status.focus-visible{outline-offset:var(--sf-space-1\/4)}.sf-view-flow__status:focus-visible{outline-offset:var(--sf-space-1\/4)}.sf-view-flow__status--error{color:var(--sf-error)}.sf-view-flow--accepted .sf-view-flow__status{color:var(--sf-on-success-container)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-flow__actions{margin-left:auto}@supports not (margin-inline-start: initial){html:not([dir="rtl"]) .sf-view-flow__actions{margin-left:auto}}.sf-view-flow__actions:where(:dir(ltr)){margin-left:auto}_:-ms-input-placeholder, [dir="rtl"] .sf-view-flow__actions{margin-right:auto}@supports not (margin-inline-start: initial){[dir="rtl"] .sf-view-flow__actions{margin-right:auto}}.sf-view-flow__actions:where(:dir(rtl)){margin-right:auto}.sf-view-flow__actions{display:flex;gap:var(--sf-space-1\/3);-webkit-margin-start:auto;margin-inline-start:auto}.sf-view-flow__actions[hidden]{display:none}@media(max-width: 479px){.sf-view-flow__fields{grid-template-columns:minmax(0, 1fr)}.sf-view-flow__field--half{grid-column:1/-1}.sf-view-flow__actions{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;width:100%;inline-size:100%}}}

package/dist/smart/view-flow/examples.json

@@ -0,0 +1,452 @@
+{
+  "examples": [
+    {
+      "name": "reference",
+      "title": "Данные записи",
+      "settings": {
+        "heading": "Заявка на отпуск № 17",
+        "fields": [
+          {
+            "key": "employee",
+            "label": "Сотрудник",
+            "propertyType": "string",
+            "width": "full",
+            "value": "Ирина Волкова"
+          },
+          {
+            "key": "from",
+            "label": "С",
+            "propertyType": "date",
+            "width": "half",
+            "value": "2026-12-21"
+          },
+          {
+            "key": "to",
+            "label": "По",
+            "propertyType": "date",
+            "width": "half",
+            "value": "2027-01-08"
+          },
+          {
+            "key": "days",
+            "label": "Дней",
+            "propertyType": "integer",
+            "width": "half",
+            "value": 19
+          },
+          {
+            "key": "status",
+            "label": "Статус",
+            "propertyType": "choice",
+            "width": "half",
+            "value": "approved",
+            "options": [
+              {
+                "value": "approved",
+                "label": "Согласована",
+                "scheme": "success"
+              }
+            ]
+          }
+        ]
+      },
+      "expect": {
+        "name": "Заявка на отпуск № 17"
+      },
+      "parent": "<div style=\"inline-size: 32rem; max-inline-size: 100%\"></div>",
+      "x-first-paint": "A message's width: the block is as wide as its flow."
+    },
+    {
+      "name": "ask",
+      "title": "Заполнить и отправить",
+      "settings": {
+        "mode": "edit",
+        "heading": "Новая командировка",
+        "block-id": "b1",
+        "fields": [
+          {
+            "key": "city",
+            "label": "Город",
+            "propertyType": "string",
+            "width": "half",
+            "required": true,
+            "placeholder": "Куда",
+            "value": null
+          },
+          {
+            "key": "from",
+            "label": "Выезд",
+            "propertyType": "date",
+            "width": "half",
+            "required": true,
+            "value": null
+          },
+          {
+            "key": "nights",
+            "label": "Ночей",
+            "propertyType": "integer",
+            "width": "half",
+            "value": 2
+          },
+          {
+            "key": "goal",
+            "label": "Цель поездки",
+            "propertyType": "text",
+            "width": "full",
+            "placeholder": "Например, встреча с заказчиком",
+            "value": null
+          }
+        ]
+      },
+      "expect": {
+        "name": "Новая командировка",
+        "host": {
+          "state": "open"
+        }
+      },
+      "parent": "<div style=\"inline-size: 32rem; max-inline-size: 100%\"></div>"
+    },
+    {
+      "name": "answered",
+      "title": "Ответ отправлен",
+      "settings": {
+        "mode": "edit",
+        "state": "accepted",
+        "heading": "Новая командировка",
+        "block-id": "b1",
+        "fields": [
+          {
+            "key": "city",
+            "label": "Город",
+            "propertyType": "string",
+            "width": "half",
+            "required": true,
+            "placeholder": "Куда",
+            "value": "Казань"
+          },
+          {
+            "key": "from",
+            "label": "Выезд",
+            "propertyType": "date",
+            "width": "half",
+            "required": true,
+            "value": "2026-11-20"
+          },
+          {
+            "key": "nights",
+            "label": "Ночей",
+            "propertyType": "integer",
+            "width": "half",
+            "value": 3
+          },
+          {
+            "key": "goal",
+            "label": "Цель поездки",
+            "propertyType": "text",
+            "width": "full",
+            "placeholder": "Например, встреча с заказчиком",
+            "value": "Встреча с заказчиком"
+          }
+        ]
+      },
+      "expect": {
+        "name": "Новая командировка",
+        "texts": {
+          ".sf-view-flow__status span": "Отправлено"
+        }
+      },
+      "parent": "<div style=\"inline-size: 32rem; max-inline-size: 100%\"></div>"
+    },
+    {
+      "name": "groups",
+      "title": "Группы",
+      "settings": {
+        "heading": "Заказ № 10458",
+        "groups": [
+          {
+            "key": "order",
+            "label": "Заказ",
+            "fields": [
+              {
+                "key": "buyer",
+                "label": "Покупатель",
+                "propertyType": "string",
+                "width": "half",
+                "value": "Анна Белова"
+              },
+              {
+                "key": "amount",
+                "label": "Сумма",
+                "propertyType": "number",
+                "unit": "₽",
+                "width": "half",
+                "value": 12490
+              }
+            ]
+          },
+          {
+            "key": "delivery",
+            "label": "Доставка",
+            "collapsible": true,
+            "collapsed": true,
+            "fields": [
+              {
+                "key": "city",
+                "label": "Город",
+                "propertyType": "string",
+                "width": "half",
+                "value": "Казань"
+              },
+              {
+                "key": "way",
+                "label": "Способ",
+                "propertyType": "string",
+                "width": "half",
+                "value": "Курьер"
+              }
+            ]
+          }
+        ]
+      },
+      "expect": {
+        "name": "Заказ № 10458"
+      },
+      "parent": "<div style=\"inline-size: 32rem; max-inline-size: 100%\"></div>"
+    },
+    {
+      "name": "expired",
+      "title": "Время ответа истекло",
+      "settings": {
+        "mode": "edit",
+        "heading": "Новая командировка",
+        "block-id": "b2",
+        "expires-at": "2020-01-01T00:00:00Z",
+        "fields": [
+          {
+            "key": "city",
+            "label": "Город",
+            "propertyType": "string",
+            "width": "half",
+            "required": true,
+            "placeholder": "Куда",
+            "value": null
+          },
+          {
+            "key": "from",
+            "label": "Выезд",
+            "propertyType": "date",
+            "width": "half",
+            "required": true,
+            "value": null
+          },
+          {
+            "key": "nights",
+            "label": "Ночей",
+            "propertyType": "integer",
+            "width": "half",
+            "value": 2
+          },
+          {
+            "key": "goal",
+            "label": "Цель поездки",
+            "propertyType": "text",
+            "width": "full",
+            "placeholder": "Например, встреча с заказчиком",
+            "value": null
+          }
+        ]
+      },
+      "expect": {
+        "name": "Новая командировка",
+        "events": [
+          "expired"
+        ]
+      },
+      "parent": "<div style=\"inline-size: 32rem; max-inline-size: 100%\"></div>"
+    },
+    {
+      "name": "untitled",
+      "title": "Без заголовка",
+      "settings": {
+        "fields": [
+          {
+            "key": "employee",
+            "label": "Сотрудник",
+            "propertyType": "string",
+            "width": "full",
+            "value": "Ирина Волкова"
+          },
+          {
+            "key": "from",
+            "label": "С",
+            "propertyType": "date",
+            "width": "half",
+            "value": "2026-12-21"
+          },
+          {
+            "key": "to",
+            "label": "По",
+            "propertyType": "date",
+            "width": "half",
+            "value": "2027-01-08"
+          }
+        ]
+      },
+      "expect": {
+        "name": "Данные"
+      },
+      "parent": "<div style=\"inline-size: 32rem; max-inline-size: 100%\"></div>"
+    }
+  ],
+  "pages": [
+    {
+      "name": "conformance",
+      "title": "sf-view-flow against component.json (standard simai.smart-component 1.4 §12, gate 20)",
+      "format": "stands/15-scenarios (A4 modal: a page, probes in steps); the runner is ui-source tests/browser/manifest-probes.browser.mjs, run for the package by scripts/run-manifest-probes.mjs",
+      "page": {
+        "lang": "ru",
+        "body": [
+          "<main>",
+          "  <sf-view-flow id=\"b\" mode=\"edit\" heading=\"Новая командировка\" block-id=\"b1\" fields='[{\"key\": \"city\", \"label\": \"Город\", \"propertyType\": \"string\", \"width\": \"half\", \"required\": true, \"placeholder\": \"Куда\", \"value\": null}, {\"key\": \"from\", \"label\": \"Выезд\", \"propertyType\": \"date\", \"width\": \"half\", \"required\": true, \"value\": null}, {\"key\": \"nights\", \"label\": \"Ночей\", \"propertyType\": \"integer\", \"width\": \"half\", \"value\": 2}, {\"key\": \"goal\", \"label\": \"Цель поездки\", \"propertyType\": \"text\", \"width\": \"full\", \"placeholder\": \"Например, встреча с заказчиком\", \"value\": null}]'></sf-view-flow>",
+          "  <sf-view-flow id=\"c\" mode=\"edit\" block-id=\"b2\" cancelable=\"false\" fields='[{\"key\": \"nights\", \"label\": \"Ночей\", \"propertyType\": \"integer\", \"width\": \"half\", \"value\": 2}]'></sf-view-flow>",
+          "  <button id=\"page-send\" type=\"button\" data-sf-action=\"c.confirm\">Отправить</button>",
+          "</main>"
+        ]
+      },
+      "checks": [
+        {
+          "id": "p1-required-stops-send",
+          "title": "Send with the required fields empty sends nothing: each says «Заполните поле», the status line «Заполните отмеченные поля», and the block stays open",
+          "covers": "actions.confirm refused invalid, required, accessibility.name heading",
+          "steps": [
+            {
+              "script": "(document.activeElement?.blur?.(), true)",
+              "wait": 60,
+              "check": "document.querySelector('#b section').getAttribute('aria-labelledby') === document.querySelector('#b [role=heading]').id"
+            },
+            {
+              "action": {
+                "name": "confirm"
+              },
+              "target": "#b",
+              "wait": 120,
+              "expect": {
+                "returns": {
+                  "outcome": "refused",
+                  "reason": "invalid"
+                },
+                "events": [
+                  {
+                    "name": "sf-view-flow-answer",
+                    "count": 0
+                  }
+                ]
+              },
+              "check": "document.querySelector('#b').state === 'open' && document.querySelectorAll('#b .sf-view-flow__error').length === 2 && document.querySelector('#b .sf-view-flow__status span').textContent.trim() === 'Заполните отмеченные поля'"
+            }
+          ]
+        },
+        {
+          "id": "p2-cancel",
+          "title": "Cancel answers {id, accepted: false}; the block is pending, then declined when the host settles it, and shows only «Отменено»",
+          "covers": "actions.cancel, events.answer, actions.settle",
+          "steps": [
+            {
+              "action": {
+                "name": "cancel"
+              },
+              "target": "#b",
+              "expect": {
+                "returns": {
+                  "outcome": "applied"
+                },
+                "events": [
+                  {
+                    "name": "sf-view-flow-answer",
+                    "count": 1,
+                    "detail": {
+                      "id": "b1",
+                      "accepted": false
+                    }
+                  }
+                ]
+              },
+              "check": "document.querySelector('#b').state === 'pending'"
+            },
+            {
+              "action": {
+                "name": "settle",
+                "with": {
+                  "result": {
+                    "answer": "applied"
+                  }
+                }
+              },
+              "target": "#b",
+              "wait": 120,
+              "expect": {
+                "returns": {
+                  "outcome": "applied"
+                }
+              },
+              "check": "document.querySelector('#b').state === 'declined' && !document.querySelector('#b .sf-view-flow__groups') && document.querySelector('#b .sf-view-flow__status span').textContent.trim() === 'Отменено'"
+            }
+          ]
+        },
+        {
+          "id": "p3-page-trigger-send",
+          "title": "a page button data-sf-action=\"c.confirm\" sends the untitled block with its values; without Cancel there is one answer; the block is named «Данные»",
+          "covers": "actions.confirm (§8 page trigger), cancelable false, accessibility.name runtime.block-label",
+          "steps": [
+            {
+              "script": "(document.activeElement?.blur?.(), true)",
+              "wait": 60,
+              "check": "document.querySelectorAll('#c sf-button').length === 1 && document.querySelector('#c section').getAttribute('aria-label') === 'Данные'"
+            },
+            {
+              "user": "click:#page-send",
+              "expect": {
+                "events": [
+                  {
+                    "name": "sf-view-flow-answer",
+                    "count": 1,
+                    "detail": {
+                      "id": "b2",
+                      "accepted": true,
+                      "values": {
+                        "nights": 2
+                      }
+                    }
+                  }
+                ]
+              },
+              "check": "document.querySelector('#c').state === 'pending'"
+            }
+          ]
+        },
+        {
+          "id": "p4-expired",
+          "title": "an open block past expires-at reads as expired, says sf-view-flow-expired once and offers no answer",
+          "covers": "events.expired (own verb)",
+          "steps": [
+            {
+              "script": "(document.querySelector('#c').state = 'open', document.querySelector('#c').setAttribute('expires-at', '2020-01-01T00:00:00Z'), true)",
+              "expect": {
+                "events": [
+                  {
+                    "name": "sf-view-flow-expired",
+                    "count": 1,
+                    "detail": {
+                      "id": "b2"
+                    }
+                  }
+                ]
+              },
+              "check": "document.querySelector('#c').shownState === 'expired' && document.querySelector('#c .sf-view-flow__actions').hidden"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}