@simai-studio/view 1.1.0 → 1.3.0

package/dist/smart/view-flow/template/default.js

@@ -0,0 +1,136 @@
+import {html, nothing} from "lit";
+import "./default.css";
+import {renderFieldValue} from "../../../view-properties/js/field-value.js";
+import {allFields, conditionedField, fieldDisabled, shownFields, valuesOnScreen} from "../answer.js";
+
+// A few properties in a flow: the header line, the fields, the status line and
+// the answers.
+//
+// The heading is a role="heading" with the level the host chooses, not a fixed
+// <h2>: the block is placed inside a message, a feed entry or a page, and the
+// level right in one is a skipped level in another.
+//
+// Every value is drawn by sf-view-properties' field value over the Framework
+// field renderers (../../../view-properties/js/field-value.js): the block has
+// no field code. A field is a label above its value, the record component's
+// reading order; a half-width field pairs up with the next one.
+//
+// The status line is a polite live region that is always in the page, and the
+// place focus goes when the answers go (the confirm surface). Send is filled and
+// Cancel outlined: a form's answer is to send it, and cancelling is the way out,
+// not a second equal choice.
+
+function renderField(context, field) {
+    const key = String(field.key);
+    const values = context.values;
+    const editing = context.editing;
+    const disabled = editing && fieldDisabled(field, values);
+    const shown = editing ? conditionedField(field, values) : {...field, value: context.component.shownValue(field)};
+    // A message the control draws under itself (a mask not filled) is not drawn twice.
+    const error = context.controlErrors.has(key) ? null : context.errors.get(key);
+    const width = field.width === "full" ? "full" : "half";
+    return html`
+        <div class="sf-view-flow__field sf-view-flow__field--${width} flex flex-col gap-1/4 min-w-0"
+             data-field=${key}
+             data-invalid=${context.errors.has(key) ? "true" : nothing}>
+            <div class="sf-view-flow__label flex items-cross-center gap-1/3 color-on-surface-variant">
+                <span>${String(field.label ?? key)}</span>
+                ${shown.required && editing
+                    ? html`<span class="sf-view-flow__required color-error" aria-hidden="true">*</span>`
+                    : nothing}
+                ${field.hint
+                    ? html`<sf-help-mark class="sf-view-flow__hint" label=${String(field.hint)} text=${String(field.hint)}></sf-help-mark>`
+                    : nothing}
+            </div>
+            <div class="sf-view-flow__value min-w-0 flex items-cross-center gap-1 flex-wrap">${renderFieldValue(context, shown, editing, {disabled})}</div>
+            ${error ? html`<div class="sf-view-flow__error color-error" role="alert">${error}</div>` : nothing}
+        </div>`;
+}
+
+function renderGroup(context, group, index) {
+    const fields = shownFields(group.fields, context.values);
+    if (!fields.length) return nothing;
+    const component = context.component;
+    const collapsed = component.groupCollapsed(group);
+    const bodyId = `${context.headingId.replace(/--heading$/u, "")}--group-${index + 1}`;
+    const body = html`
+        <div class="sf-view-flow__fields" id=${bodyId} ?hidden=${collapsed}>
+            ${fields.map((field) => renderField(context, field))}
+        </div>`;
+    if (!group.label) return html`<div class="sf-view-flow__group" data-group=${group.key}>${body}</div>`;
+    return html`
+        <div class="sf-view-flow__group" data-group=${group.key} data-collapsed=${collapsed ? "true" : nothing}>
+            ${group.collapsible
+                ? html`<button type="button" class="sf-view-flow__group-label sf-view-flow__toggle flex items-cross-center gap-1/4"
+                               aria-expanded=${collapsed ? "false" : "true"} aria-controls=${bodyId}
+                               @click=${() => component.toggleGroup(group.key)}>
+                        <sf-icon icon="expand_more" size="1/2" aria-hidden="true"></sf-icon>
+                        <span>${group.label}</span>
+                    </button>`
+                : html`<div class="sf-view-flow__group-label">${group.label}</div>`}
+            ${body}
+        </div>`;
+}
+
+function renderFoot(context) {
+    if (!context.footShown) return nothing;
+    const component = context.component;
+    const answering = context.open || context.pending;
+    return html`
+        <footer class="sf-view-flow__footer">
+            <!-- Always in the page, empty while there is nothing to say: a live
+                 region that appears together with its words is not heard. -->
+            <p class="sf-view-flow__status${context.statusError ? " sf-view-flow__status--error" : ""}"
+               role="status" tabindex="-1">
+                ${context.statusText
+                    ? html`<sf-icon icon=${context.statusIcon} size="1/2" aria-hidden="true"></sf-icon><span>${context.statusText}</span>`
+                    : nothing}
+            </p>
+            <div class="sf-view-flow__actions" ?hidden=${!answering}>
+                ${context.cancelable
+                    ? html`<sf-button appearance="outline" scheme="on-surface" size=${context.size}
+                                      text=${context.cancelText} data-action="cancel"
+                                      ?loading=${context.pressed === false}
+                                      ?disabled=${context.answersLocked && context.pressed !== false}
+                                      @click=${() => component.cancel()}></sf-button>`
+                    : nothing}
+                <sf-button scheme="primary" size=${context.size}
+                           text=${context.submitText} data-action="submit"
+                           ?loading=${context.pressed === true}
+                           ?disabled=${context.answersLocked && context.pressed !== true}
+                           @click=${() => component.confirm()}></sf-button>
+            </div>
+        </footer>`;
+}
+
+export function renderViewFlowTemplate(context) {
+    // The values the conditions read: what is typed while the block takes an
+    // answer, else what it shows (the answer sent, or the host's values).
+    const values = context.editing
+        ? valuesOnScreen(context.groups, context.changed)
+        : new Map(allFields(context.groups).map((field) => [String(field.key), context.component.shownValue(field)]));
+    const scoped = {...context, values};
+    return html`
+        <section
+                class="sf-view-flow sf-view-flow--${context.mode}${context.editing ? " sf-view-flow--editing" : ""} sf-view-flow--${context.state} sf-view-flow--size-${context.size === "1" ? "1" : "1-2"}"
+                aria-labelledby=${context.heading ? context.headingId : nothing}
+                aria-label=${context.heading ? nothing : context.blockLabel}
+                aria-busy=${context.pending ? "true" : nothing}
+                data-state=${context.mode === "edit" ? context.state : nothing}
+        >
+            ${context.heading
+                ? html`<div class="sf-view-flow__heading" id=${context.headingId} role="heading"
+                            aria-level=${context.headingLevel}>${context.heading}</div>`
+                : nothing}
+            ${context.hasDescription
+                ? html`<div class="sf-view-flow__description">${context.descriptionContent}</div>`
+                : nothing}
+            ${context.fieldsShown
+                ? html`<div class="sf-view-flow__groups" ?inert=${context.fieldsLocked}>
+                        ${context.groups.map((group, index) => renderGroup(scoped, group, index))}
+                    </div>`
+                : nothing}
+            ${renderFoot(context)}
+        </section>
+    `;
+}

package/dist/smart/view-properties/component.json

@@ -2,7 +2,7 @@
   "$comment": "sf-property-view from its component.json (standard simai.smart-component 1.3.8, vocabulary 1.1.5), migrated from ui-control control/smart-architecture/migration/out/property-view; every x-todo decided in x-decisions.",
   "id": "smart.view-properties",
   "tag": "sf-view-properties",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "kind": "leaf",
   "family": "record",
   "implements": [
@@ -1690,6 +1690,13 @@
           "changes": [
             "A datetime or time field is one sf-input-date (mode datetime or time) instead of a day and a masked time field; the value written is the same ISO 8601. Dates the host does not format read in the page's language. A colour palette wraps in a half-width field. A closed panel shows no close button or shadow over the page. An entry put back to the stored value is not written. Nothing to change for a host; a host that read the pair's names («<label>: дата», «<label>: время») finds one control named by the label."
           ]
+        },
+        {
+          "from": "1.10.1",
+          "to": "1.11.0",
+          "changes": [
+            "The set draws five property types itself, from Framework controls: money {amount, currency} (an amount with the currency's sign, or a currency choice; minor digits by ISO 4217), percent (a decimal with %), items (rows over the field's columns: typed cells, computed cells worked out live, totals, rows added, removed and moved, min and max rows, a card a row where the field is narrow), compound (a fixed set of parts, one value object) and ru.requisites (ИНН, КПП, ОГРН, БИК, accounts, checked part by part and together). Every number is a decimal string, never a float. An entry that is not a value yet holds both saves, as an incomplete masked string does. The settings they read (currency, columns, minRows, maxRows, parts) are due in simai.property-view-port 1.18.0. Nothing changes for a host that sends none of these types."
+          ]
         }
       ]
     },

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

@@ -1156,3 +1156,370 @@
     white-space: pre;
   }
 }
+@layer sf.components {
+  /* The property types the set draws itself (js/set-fields.js): money, percent,
+     rows (items) and the compound fields. Framework tokens only; the controls in
+     them are the Framework's own and keep their own geometry on the size ladder. */
+  /* An amount with a currency choice: the amount takes the room, the currency
+     the width of its code and sign. */
+  .sf-view-fields-money {
+    width: 100%;
+    inline-size: 100%;
+    align-items: flex-start;
+  }
+  /* sf-input and sf-dropdown hosts may draw no box of their own (display:
+     contents), so the rules reach the box they draw as well. */
+  .sf-view-fields-money > .sf-view-fields-decimal,
+  .sf-view-fields-money > .sf-view-fields-decimal > .sf-input {
+    flex: 1 1 8rem;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-fields-money > .sf-view-fields-currency,
+  .sf-view-fields-money > .sf-view-fields-currency > .sf-dropdown {
+    flex: 0 0 8.5rem;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  /* A control in a cell or a part fills its track: a native input's own
+     width (twenty characters) pushed a cell over its neighbour. */
+  .sf-view-items-cell .sf-input {
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-items-cell .sf-dropdown {
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-items-cell .sf-input-date {
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-fields-part .sf-input {
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-fields-part .sf-dropdown {
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-items-cell .sf-input-field input,
+  .sf-view-fields-part .sf-input-field input {
+    width: 100%;
+    inline-size: 100%;
+  }
+  /* A number reads right-aligned where numbers stand in a column (a row's
+     cells, totals); a lone amount in a field keeps the field's start. */
+  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items .sf-view-fields-decimal input {
+    text-align: right;
+  }
+  @supports not (text-align: end) {
+  html:not([dir="rtl"]) .sf-view-items .sf-view-fields-decimal input {
+    text-align: right;
+    }
+  }
+  .sf-view-items .sf-view-fields-decimal input:where(:dir(ltr)) {
+    text-align: right;
+  }
+  _:-ms-input-placeholder, [dir="rtl"] .sf-view-items .sf-view-fields-decimal input {
+    text-align: left;
+  }
+  @supports not (text-align: end) {
+  [dir="rtl"] .sf-view-items .sf-view-fields-decimal input {
+    text-align: left;
+    }
+  }
+  .sf-view-items .sf-view-fields-decimal input:where(:dir(rtl)) {
+    text-align: left;
+  }
+  .sf-view-items .sf-view-fields-decimal input {
+    text-align: end;
+  }
+  .sf-view-fields-amount,
+  .sf-view-items-numeric .sf-view-items-text {
+    -webkit-font-feature-settings: "tnum";
+            font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+  }
+  /* --- A compound: its parts in a grid that wraps by the field's width --- */
+  .sf-view-fields-compound {
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
+  }
+  .sf-view-fields-part--wide {
+    grid-column: span 2;
+  }
+  .sf-view-fields-part-label {
+    font-size: var(--sf-text-size-1);
+    font-size: var(--sf-label-medium--size, var(--sf-text-size-1));
+    line-height: var(--sf-text-height-1);
+    line-height: var(--sf-label-medium--height, var(--sf-text-height-1));
+  }
+  @container (max-width: 24rem) {
+    .sf-view-fields-part--wide {
+      grid-column: auto;
+    }
+  }
+  /* --- Rows over columns --- */
+  /* A table of rows at any width the field has, and one card a row where it is
+     narrow (a phone, a half-width field): the field's own width decides, not the
+     window's, as the record's groups decide their columns. */
+  /* The box the rows ask for their width: a container query cannot restyle
+     the container itself, so the grid is inside it. */
+  .sf-view-items-box {
+    display: block;
+    container: sf-view-items/inline-size;
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+    flex: 1 1 100%;
+  }
+  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items {
+    text-align: left;
+  }
+  @supports not (text-align: start) {
+  html:not([dir="rtl"]) .sf-view-items {
+    text-align: left;
+    }
+  }
+  .sf-view-items:where(:dir(ltr)) {
+    text-align: left;
+  }
+  _:-ms-input-placeholder, [dir="rtl"] .sf-view-items {
+    text-align: right;
+  }
+  @supports not (text-align: start) {
+  [dir="rtl"] .sf-view-items {
+    text-align: right;
+    }
+  }
+  .sf-view-items:where(:dir(rtl)) {
+    text-align: right;
+  }
+  .sf-view-items {
+    display: grid;
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+    grid-template-columns: 1fr;
+    grid-template-columns: var(--sf-view-items-columns, 1fr);
+    grid-column-gap: var(--sf-space-1);
+    -webkit-column-gap: var(--sf-space-1);
+       -moz-column-gap: var(--sf-space-1);
+            column-gap: var(--sf-space-1);
+    text-align: start;
+  }
+  .sf-view-items-head,
+  .sf-view-items-row {
+    display: grid;
+    grid-column: 1/-1;
+    grid-template-columns: subgrid;
+    align-items: center;
+  }
+  .sf-view-items-head {
+    padding-bottom: var(--sf-space-1);
+    -webkit-padding-after: var(--sf-space-1);
+            padding-block-end: var(--sf-space-1);
+    border-bottom: var(--sf-px) solid var(--sf-outline-variant);
+    -webkit-border-after: var(--sf-px) solid var(--sf-outline-variant);
+            border-block-end: var(--sf-px) solid var(--sf-outline-variant);
+  }
+  .sf-view-items-heading {
+    font-size: var(--sf-text-size-1);
+    font-size: var(--sf-label-medium--size, var(--sf-text-size-1));
+    line-height: var(--sf-text-height-1);
+    line-height: var(--sf-label-medium--height, var(--sf-text-height-1));
+    color: var(--sf-on-surface-variant);
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-items-row {
+    padding-top: var(--sf-space-1);
+    padding-bottom: var(--sf-space-1);
+    padding-block: var(--sf-space-1);
+    border-bottom: var(--sf-px) solid var(--sf-outline-variant);
+    -webkit-border-after: var(--sf-px) solid var(--sf-outline-variant);
+            border-block-end: var(--sf-px) solid var(--sf-outline-variant);
+  }
+  .sf-view-items:not(.sf-view-items--edit) .sf-view-items-row {
+    padding-top: calc(var(--sf-space-1) / 2);
+    padding-bottom: calc(var(--sf-space-1) / 2);
+    padding-block: calc(var(--sf-space-1) / 2);
+  }
+  .sf-view-items-cell {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items-numeric {
+    text-align: right;
+  }
+  @supports not (text-align: end) {
+  html:not([dir="rtl"]) .sf-view-items-numeric {
+    text-align: right;
+    }
+  }
+  .sf-view-items-numeric:where(:dir(ltr)) {
+    text-align: right;
+  }
+  _:-ms-input-placeholder, [dir="rtl"] .sf-view-items-numeric {
+    text-align: left;
+  }
+  @supports not (text-align: end) {
+  [dir="rtl"] .sf-view-items-numeric {
+    text-align: left;
+    }
+  }
+  .sf-view-items-numeric:where(:dir(rtl)) {
+    text-align: left;
+  }
+  .sf-view-items-numeric {
+    text-align: end;
+    align-items: flex-end;
+  }
+  .sf-view-items-cell > :not(.sf-view-items-cell-label) {
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-items-text {
+    word-wrap: anywhere;
+  }
+  .sf-view-items-cell-label {
+    display: none;
+    font-size: var(--sf-text-size-1);
+    font-size: var(--sf-label-medium--size, var(--sf-text-size-1));
+    line-height: var(--sf-text-height-1);
+    line-height: var(--sf-label-medium--height, var(--sf-text-height-1));
+  }
+  .sf-view-items-totals {
+    border-bottom: 0;
+    -webkit-border-after: 0;
+            border-block-end: 0;
+    font-weight: 600;
+  }
+  .sf-view-items-foot {
+    grid-column: 1/-1;
+    padding-top: var(--sf-space-1);
+    -webkit-padding-before: var(--sf-space-1);
+            padding-block-start: var(--sf-space-1);
+  }
+  @container sf-view-items (max-width: 36rem) {
+    .sf-view-items {
+      grid-template-columns: 1fr;
+      row-gap: var(--sf-space-1);
+    }
+    .sf-view-items-head {
+      display: none;
+    }
+    /* A card a row: each cell its label over its value, the row's actions at
+       the card's foot. */
+    .sf-view-items-row {
+      grid-template-columns: 1fr;
+      row-gap: var(--sf-space-1);
+      padding: var(--sf-space-1) var(--sf-space-2);
+      border: var(--sf-px) solid var(--sf-outline-variant);
+      border-radius: var(--sf-radius-1);
+    }
+    .sf-view-items:not(.sf-view-items--edit) .sf-view-items-row {
+      padding: var(--sf-space-1) var(--sf-space-2);
+    }
+    _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items-cell,html:not([dir="rtl"])
+    .sf-view-items-numeric {
+      text-align: left;
+    }
+    @supports not (text-align: start) {
+    html:not([dir="rtl"]) .sf-view-items-cell,html:not([dir="rtl"])
+    .sf-view-items-numeric {
+      text-align: left;
+      }
+    }
+    .sf-view-items-cell:where(:dir(ltr)),
+    .sf-view-items-numeric:where(:dir(ltr)) {
+      text-align: left;
+    }
+    _:-ms-input-placeholder, [dir="rtl"] .sf-view-items-cell,[dir="rtl"]
+    .sf-view-items-numeric {
+      text-align: right;
+    }
+    @supports not (text-align: start) {
+    [dir="rtl"] .sf-view-items-cell,[dir="rtl"]
+    .sf-view-items-numeric {
+      text-align: right;
+      }
+    }
+    .sf-view-items-cell:where(:dir(rtl)),
+    .sf-view-items-numeric:where(:dir(rtl)) {
+      text-align: right;
+    }
+    .sf-view-items-cell,
+    .sf-view-items-numeric {
+      align-items: stretch;
+      text-align: start;
+      gap: calc(var(--sf-space-1) / 4);
+    }
+    _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items-numeric .sf-view-items-text,html:not([dir="rtl"])
+    .sf-view-items .sf-view-fields-decimal input {
+      text-align: left;
+    }
+    @supports not (text-align: start) {
+    html:not([dir="rtl"]) .sf-view-items-numeric .sf-view-items-text,html:not([dir="rtl"])
+    .sf-view-items .sf-view-fields-decimal input {
+      text-align: left;
+      }
+    }
+    .sf-view-items-numeric .sf-view-items-text:where(:dir(ltr)),
+    .sf-view-items .sf-view-fields-decimal input:where(:dir(ltr)) {
+      text-align: left;
+    }
+    _:-ms-input-placeholder, [dir="rtl"] .sf-view-items-numeric .sf-view-items-text,[dir="rtl"]
+    .sf-view-items .sf-view-fields-decimal input {
+      text-align: right;
+    }
+    @supports not (text-align: start) {
+    [dir="rtl"] .sf-view-items-numeric .sf-view-items-text,[dir="rtl"]
+    .sf-view-items .sf-view-fields-decimal input {
+      text-align: right;
+      }
+    }
+    .sf-view-items-numeric .sf-view-items-text:where(:dir(rtl)),
+    .sf-view-items .sf-view-fields-decimal input:where(:dir(rtl)) {
+      text-align: right;
+    }
+    .sf-view-items-numeric .sf-view-items-text,
+    .sf-view-items .sf-view-fields-decimal input {
+      text-align: start;
+    }
+    .sf-view-items-cell-label {
+      display: block;
+    }
+    .sf-view-items-cell--blank {
+      display: none;
+    }
+    .sf-view-items-actions {
+      justify-content: flex-end;
+    }
+    .sf-view-items-totals {
+      border: 0;
+      padding-left: var(--sf-space-2);
+      padding-right: var(--sf-space-2);
+      padding-inline: var(--sf-space-2);
+    }
+    .sf-view-items-totals .sf-view-items-total-word {
+      display: none;
+    }
+  }
+}

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

@@ -1,2 +1,3 @@
 @layer sf.reset, sf.tokens, sf.base, sf.utilities, sf.components, sf.overrides, sf.states;
 @layer sf.components{sf-view-properties{display:block}sf-property-view{display:block}sf-view-properties:not([panel]){display:block !important;height:100%;block-size:100%;overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}sf-property-view:not([panel]){display:block !important;height:100%;block-size:100%;overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}sf-view-properties[full]{display:block !important;height:100%;block-size:100%;overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}sf-property-view[full]{display:block !important;height:100%;block-size:100%;overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}.sf-property-view-panel[data-stacked=true]{opacity:.6;pointer-events:none}.sf-property-view-panel[data-stacked=true]::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background-color:var(--sf-surface-0);opacity:.4;pointer-events:none}.sf-property-view-panel{gap:0;min-height:100%;min-block-size:100%;padding:0}.sf-property-view-panel{flex:1 1 auto;min-height:0;min-block-size:0;margin-top:calc(-1*var(--sf-property-view--panel-axis));margin-bottom:calc(-1*var(--sf-property-view--panel-axis));margin-block:calc(-1*var(--sf-property-view--panel-axis));overflow:visible}.sf-property-view-scroll{overflow-x:hidden;overflow-y:auto;overflow:hidden auto;scrollbar-gutter:stable both-edges;-ms-scroll-chaining:none;overscroll-behavior:contain;padding-top:var(--sf-space-1);padding-bottom:var(--sf-space-1);padding-block:var(--sf-space-1)}.sf-property-view-panel--railed .sf-property-view-scroll{overflow:hidden;align-items:stretch;gap:var(--sf-space-1);gap:var(--sf-drawer-gutter, var(--sf-space-1));scrollbar-gutter:auto}.sf-property-view-panel--railed .sf-property-view-scroll{padding-top:0;padding-bottom:0;padding-block:0}.sf-property-view-panel--railed .sf-property-view-sections,.sf-property-view-panel--railed .sf-property-view-frame{overflow-x:hidden;overflow-y:auto;overflow:hidden auto;min-height:0;min-block-size:0;padding-top:var(--sf-space-1);padding-bottom:var(--sf-space-1);padding-block:var(--sf-space-1);-ms-scroll-chaining:none;overscroll-behavior:contain}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-property-view-panel--railed .sf-property-view-frame{padding-right:0}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-property-view-panel--railed .sf-property-view-frame{padding-right:0}}.sf-property-view-panel--railed .sf-property-view-frame:where(:dir(ltr)){padding-right:0}_:-ms-input-placeholder, [dir="rtl"] .sf-property-view-panel--railed .sf-property-view-frame{padding-left:0}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-property-view-panel--railed .sf-property-view-frame{padding-left:0}}.sf-property-view-panel--railed .sf-property-view-frame:where(:dir(rtl)){padding-left:0}.sf-property-view-panel--railed .sf-property-view-frame{-webkit-padding-end:0;padding-inline-end:0;scrollbar-gutter:stable}.sf-property-view-panel--railed .sf-property-view-sections{position:static;align-self:stretch}.sf-property-view-panel>.sf-property-view-layout{flex:1 1 auto;min-height:0;min-block-size:0}.sf-property-view-layout{container-type:inline-size;container-name:sf-property-view}.sf-property-view-status[hidden]{display:none}sf-view-properties{--sf-property-view--panel-bleed: var(--sf-drawer-gutter, var(--sf-space-1));--sf-property-view--panel-axis: calc( var(--sf-property-view--panel-bleed) + var(--sf-scroll-bg-width, 0px) )}sf-property-view{--sf-property-view--panel-bleed: var(--sf-drawer-gutter, var(--sf-space-1));--sf-property-view--panel-axis: calc( var(--sf-property-view--panel-bleed) + var(--sf-scroll-bg-width, 0px) )}.sf-property-view-panel{--sf-property-view--panel-bleed: var(--sf-drawer-gutter, var(--sf-space-1));--sf-property-view--panel-axis: calc( var(--sf-property-view--panel-bleed) + var(--sf-scroll-bg-width, 0px) )}.sf-property-view-layout{display:flex;align-items:flex-start;gap:var(--sf-space-4)}.sf-property-view-sections{position:sticky;top:0;inset-block-start:0;gap:var(--sf-px);padding-left:var(--sf-space-1\/4);padding-right:var(--sf-space-1\/4);padding-inline:var(--sf-space-1\/4);--sf-tree--padding-inline-start: 0;--sf-tree--padding-inline-end: 0;--sf-tree--padding-top: 0;--sf-tree--padding-bottom: 0;--sf-tree--gap: var(--sf-px);--sf-tree-item--padding-inline: var(--sf-space-1\/3)}.sf-property-view-section-tabs{gap:var(--sf-px)}.sf-property-view-section-tab{width:100%;inline-size:100%;padding-top:var(--sf-space-1\/3);padding-bottom:var(--sf-space-1\/3);padding-block:var(--sf-space-1\/3);padding-left:var(--sf-space-1\/4);padding-right:var(--sf-space-1\/4);padding-inline:var(--sf-space-1\/4);border:0;background-color:rgba(0,0,0,0);color:inherit;font:inherit;transition:background-color var(--sf-duration-fast) var(--sf-animation)}.sf-property-view-section-tab:hover{background-color:var(--sf-surface-transparent-hover)}.sf-property-view-section-tab[aria-current=true]{background-color:var(--sf-primary-container);color:var(--sf-on-primary-container)}.sf-property-view-section-tab-label{word-wrap:anywhere}.sf-property-view-section-grip{cursor:-webkit-grab;cursor:grab}.sf-property-view-sections{flex:0 0 var(--sf-property-view--sections-width)}.sf-property-view-group{container-type:inline-size;container-name:sf-property-view-group;border:var(--sf-px) solid var(--sf-outline-variant);border-radius:var(--sf-radius--surface);padding:var(--sf-space-2)}.sf-property-view-group-header{padding-bottom:var(--sf-space-1);-webkit-padding-after:var(--sf-space-1);padding-block-end:var(--sf-space-1);border-bottom:var(--sf-px) solid var(--sf-outline-variant);-webkit-border-after:var(--sf-px) solid var(--sf-outline-variant);border-block-end:var(--sf-px) solid var(--sf-outline-variant)}.sf-property-view-tabs--skeleton:not([data-sections-as=tabs]){display:none}@media not all and (min-width: 48rem){.sf-property-view-tabs--skeleton{display:none}}.sf-property-view-group-title{margin:0;font-size:var(--sf-heading-6--size);font-size:var(--sf-property-view--group-size, var(--sf-heading-6--size));line-height:var(--sf-heading-6--height);line-height:var(--sf-property-view--group-height, var(--sf-heading-6--height));font-weight:600}.sf-property-view-field-label{font-size:var(--sf-label-large--size);font-size:var(--sf-property-view--label-size, var(--sf-label-large--size));line-height:var(--sf-label-large--height);line-height:var(--sf-property-view--label-height, var(--sf-label-large--height))}.sf-property-view-field-value{font-size:var(--sf-text-medium--size);font-size:var(--sf-property-view--value-size, var(--sf-text-medium--size));line-height:var(--sf-text-medium--height);line-height:var(--sf-property-view--value-height, var(--sf-text-medium--height));color:var(--sf-on-surface)}.sf-property-view-group-fields{display:grid;grid-gap:var(--sf-space-3) var(--sf-space-4);gap:var(--sf-space-3) var(--sf-space-4);grid-template-columns:1fr}.sf-property-view-group[data-columns="2"] .sf-property-view-group-fields{grid-template-columns:repeat(2, minmax(0, 1fr))}@container sf-property-view-group (max-width: 29rem){.sf-property-view-group[data-columns="2"] .sf-property-view-group-fields{grid-template-columns:1fr}}@container sf-property-view (max-width: 35rem){.sf-property-view-layout{display:block}.sf-property-view-sections{margin-bottom:var(--sf-space-3);-webkit-margin-after:var(--sf-space-3);margin-block-end:var(--sf-space-3)}}.sf-property-view-field--full{grid-column:1/-1}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-property-view-required{margin-left:var(--sf-space-1)}@supports not (margin-inline-start: initial){html:not([dir="rtl"]) .sf-property-view-required{margin-left:var(--sf-space-1)}}.sf-property-view-required:where(:dir(ltr)){margin-left:var(--sf-space-1)}_:-ms-input-placeholder, [dir="rtl"] .sf-property-view-required{margin-right:var(--sf-space-1)}@supports not (margin-inline-start: initial){[dir="rtl"] .sf-property-view-required{margin-right:var(--sf-space-1)}}.sf-property-view-required:where(:dir(rtl)){margin-right:var(--sf-space-1)}.sf-property-view-required{-webkit-margin-start:var(--sf-space-1);margin-inline-start:var(--sf-space-1)}.sf-property-view-field--full .sf-property-view-field-value{display:block}.sf-property-view-field-value{display:flex}.sf-property-view-field-value .sf-color{flex-wrap:wrap;max-width:100%;max-inline-size:100%;min-width:0;min-inline-size:0}.sf-property-view-field-value .sf-color-swatches{flex-wrap:wrap;min-width:0;min-inline-size:0}.sf-property-view-host-actions{margin-bottom:var(--sf-space-3);-webkit-margin-after:var(--sf-space-3);margin-block-end:var(--sf-space-3)}.sf-property-view-host-footer{margin-top:var(--sf-space-3);-webkit-margin-before:var(--sf-space-3);margin-block-start:var(--sf-space-3)}.sf-property-view-actions{flex:0 0 auto;z-index:1;margin-left:calc(-1*var(--sf-property-view--panel-bleed));margin-right:calc(-1*var(--sf-property-view--panel-bleed));margin-inline:calc(-1*var(--sf-property-view--panel-bleed));padding:var(--sf-space-1) var(--sf-property-view--panel-axis);background-color:var(--sf-surface-2);border-top:var(--sf-px) solid var(--sf-outline-variant)}.sf-property-view-group--editing{border-color:var(--sf-primary)}@media(max-width: 47.99rem){.sf-property-view-layout{display:block}.sf-property-view-sections{margin-bottom:var(--sf-space-3);-webkit-margin-after:var(--sf-space-3);margin-block-end:var(--sf-space-3)}}@media(forced-colors: active){.sf-property-view-group{border-color:CanvasText}.sf-property-view-actions{border-top-color:CanvasText}}.sf-property-view-grip{flex:0 0 auto;display:inline-flex;justify-content:center;font-size:var(--sf-space-2);font-size:var(--sf-text-height-1\/2, var(--sf-space-2));width:var(--sf-space-2);inline-size:var(--sf-space-2);height:var(--sf-space-2);block-size:var(--sf-space-2);cursor:-webkit-grab;cursor:grab;--sf-icon--color: var(--sf-on-surface-variant)}.sf-property-view-grip:hover{--sf-icon--color: var(--sf-on-surface)}[data-sf-sortable-dragging] .sf-property-view-grip,.sf-property-view-grip:active{cursor:-webkit-grabbing;cursor:grabbing}.sf-property-view-group--unplaced{border-style:dashed;background-color:rgba(0,0,0,0)}.sf-property-view-field--unplaced{grid-template-areas:"grip label actions"}.sf-property-view-unplaced{min-height:var(--sf-space-4);min-block-size:var(--sf-space-4)}.sf-property-view-field[data-hidden=true],.sf-property-view-group[data-hidden=true]{opacity:.55}.sf-property-view-field[data-arranging=true]{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;grid-template-areas:"grip label actions" ".    value value";align-items:center;grid-column-gap:var(--sf-space-1);-webkit-column-gap:var(--sf-space-1);-moz-column-gap:var(--sf-space-1);column-gap:var(--sf-space-1)}.sf-property-view-field[data-arranging=true]>.sf-property-view-grip{grid-area:grip}.sf-property-view-field[data-arranging=true]>.sf-property-view-field-label{grid-area:label}.sf-property-view-field[data-arranging=true]>.sf-property-view-field-value{grid-area:value}.sf-property-view-field-actions{grid-area:actions}.sf-property-view-rare{font-size:var(--sf-label-small--size);line-height:var(--sf-label-small--height);opacity:.75}.sf-property-view-section-bar{padding-bottom:var(--sf-space-1);-webkit-padding-after:var(--sf-space-1);padding-block-end:var(--sf-space-1);border-bottom:var(--sf-px) solid var(--sf-outline-variant);-webkit-border-after:var(--sf-px) solid var(--sf-outline-variant);border-block-end:var(--sf-px) solid var(--sf-outline-variant)}.sf-property-view-section-title{margin:0;font-size:var(--sf-title-small--size);line-height:var(--sf-title-small--height)}.sf-property-view-rename-trigger{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;margin:0;padding:0;background:none;color:inherit;font:inherit}.sf-property-view-rename-trigger:hover{text-decoration:underline}.sf-property-view-additions{padding-top:var(--sf-space-1);-webkit-padding-before:var(--sf-space-1);padding-block-start:var(--sf-space-1)}.sf-property-view-additions sf-button,.sf-property-view-additions .sf-button{width:100%;inline-size:100%}.sf-property-view-group--unplaced .sf-accordion-content{padding-top:0;-webkit-padding-before:0;padding-block-start:0}.sf-property-view-unplaced{gap:var(--sf-space-1\/3)}.sf-property-view-unplaced .sf-property-view-field--unplaced{padding-top:var(--sf-space-1\/4);padding-bottom:var(--sf-space-1\/4);padding-block:var(--sf-space-1\/4)}.sf-property-view-settings-row--stacked{align-items:stretch}.sf-property-view-settings-label{font-size:var(--sf-text-size-1\/3);line-height:var(--sf-text-height-1\/3)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-property-view-group-related{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-table--row-text-inset, 0px))}@supports not (margin-inline-start: initial){html:not([dir="rtl"]) .sf-property-view-group-related{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-table--row-text-inset, 0px))}}.sf-property-view-group-related:where(:dir(ltr)){margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-table--row-text-inset, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-property-view-group-related{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-table--row-text-inset, 0px))}@supports not (margin-inline-start: initial){[dir="rtl"] .sf-property-view-group-related{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-table--row-text-inset, 0px))}}.sf-property-view-group-related:where(:dir(rtl)){margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-table--row-text-inset, 0px))}.sf-property-view-group-related{-webkit-margin-start:calc(-1*0px);margin-inline-start:calc(-1*0px);-webkit-margin-start:calc(-1*var(--sf-table--row-text-inset, 0px));margin-inline-start:calc(-1*var(--sf-table--row-text-inset, 0px))}.sf-property-view-empty-record{margin:0;padding:var(--sf-space-4) var(--sf-space-2);text-align:center}.sf-property-view-group-error{color:currentColor;color:var(--sf-color-danger-text, currentColor);padding-left:var(--sf-space-3);padding-right:var(--sf-space-3);padding-inline:var(--sf-space-3);padding-bottom:var(--sf-space-2);-webkit-padding-after:var(--sf-space-2);padding-block-end:var(--sf-space-2)}.sf-property-view-phone-section{min-height:var(--sf-ui-2--control-height);min-block-size:var(--sf-ui-2--control-height);padding-left:var(--sf-space-3);padding-right:var(--sf-space-3);padding-inline:var(--sf-space-3);border:0;background:none;color:inherit;font:inherit}.sf-property-view-phone-section+.sf-property-view-phone-section{border-top:var(--sf-px) solid var(--sf-outline-variant);-webkit-border-before:var(--sf-px) solid var(--sf-outline-variant);border-block-start:var(--sf-px) solid var(--sf-outline-variant)}.sf-property-view-phone-head{min-height:var(--sf-ui-2--control-height);min-block-size:var(--sf-ui-2--control-height)}.sf-property-view-phone-title{margin:0;font:inherit;font-weight:600}@media(max-width: 47.99rem){.sf-property-view-actions{background-color:var(--sf-surface-0)}}.sf-property-view-head{flex:0 0 auto;z-index:2;margin-left:calc(-1*var(--sf-property-view--panel-bleed));margin-right:calc(-1*var(--sf-property-view--panel-bleed));margin-inline:calc(-1*var(--sf-property-view--panel-bleed));padding:var(--sf-property-view--panel-bleed) var(--sf-property-view--panel-axis) var(--sf-space-1);background-color:var(--sf-surface-1);border-bottom:var(--sf-px) solid var(--sf-outline-variant);-webkit-border-after:var(--sf-px) solid var(--sf-outline-variant);border-block-end:var(--sf-px) solid var(--sf-outline-variant)}.sf-property-view-title{margin:0;font-size:var(--sf-heading-4--size);font-size:var(--sf-property-view--title-size, var(--sf-heading-4--size));line-height:var(--sf-heading-4--height);line-height:var(--sf-property-view--title-height, var(--sf-heading-4--height));font-weight:700;text-overflow:ellipsis;white-space:nowrap}.sf-property-view-edge sf-button-icon button{border-radius:50%}.sf-drawer:not(.is-open) .sf-drawer-edge:has(>.sf-property-view-edge){visibility:hidden}.sf-drawer:not(.is-open) .sf-drawer-panel:has(.sf-property-view-panel){visibility:hidden;transition:visibility 0s linear var(--sf-duration-normal),-webkit-transform var(--sf-duration-normal) var(--sf-ease-exit);transition:transform var(--sf-duration-normal) var(--sf-ease-exit),visibility 0s linear var(--sf-duration-normal);transition:transform var(--sf-duration-normal) var(--sf-ease-exit),visibility 0s linear var(--sf-duration-normal),-webkit-transform var(--sf-duration-normal) var(--sf-ease-exit)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-property-view-panel--fills .sf-property-view-head{padding-left:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2));padding-left:calc(var(--sf-space-1) + var(--sf-property-view--edge-room, 0px) + var(--sf-space-1\/2))}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-property-view-panel--fills .sf-property-view-head{padding-left:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2));padding-left:calc(var(--sf-space-1) + var(--sf-property-view--edge-room, 0px) + var(--sf-space-1\/2))}}.sf-property-view-panel--fills .sf-property-view-head:where(:dir(ltr)){padding-left:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2));padding-left:calc(var(--sf-space-1) + var(--sf-property-view--edge-room, 0px) + var(--sf-space-1\/2))}_:-ms-input-placeholder, [dir="rtl"] .sf-property-view-panel--fills .sf-property-view-head{padding-right:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2));padding-right:calc(var(--sf-space-1) + var(--sf-property-view--edge-room, 0px) + var(--sf-space-1\/2))}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-property-view-panel--fills .sf-property-view-head{padding-right:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2));padding-right:calc(var(--sf-space-1) + var(--sf-property-view--edge-room, 0px) + var(--sf-space-1\/2))}}.sf-property-view-panel--fills .sf-property-view-head:where(:dir(rtl)){padding-right:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2));padding-right:calc(var(--sf-space-1) + var(--sf-property-view--edge-room, 0px) + var(--sf-space-1\/2))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-property-view-panel--fills .sf-property-view-head{padding-left:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2))}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-property-view-panel--fills .sf-property-view-head{padding-left:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2))}}.sf-property-view-panel--fills .sf-property-view-head:where(:dir(ltr)){padding-left:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2))}_:-ms-input-placeholder, [dir="rtl"] .sf-property-view-panel--fills .sf-property-view-head{padding-right:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2))}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-property-view-panel--fills .sf-property-view-head{padding-right:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2))}}.sf-property-view-panel--fills .sf-property-view-head:where(:dir(rtl)){padding-right:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2))}.sf-property-view-panel--fills .sf-property-view-head{-webkit-padding-start:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2));padding-inline-start:calc(var(--sf-space-1) + 0px + var(--sf-space-1\/2));-webkit-padding-start:calc(var(--sf-space-1) + var(--sf-property-view--edge-room, 0px) + var(--sf-space-1\/2));padding-inline-start:calc(var(--sf-space-1) + var(--sf-property-view--edge-room, 0px) + var(--sf-space-1\/2))}.sf-property-view-field-open{width:100%;inline-size:100%;padding:0;border:0;background:none;color:inherit;font:inherit}.sf-property-view-pen{opacity:0;--sf-icon--color: var(--sf-on-surface-variant)}.sf-property-view-field-open:hover .sf-property-view-pen,.sf-property-view-field-open.focus-visible .sf-property-view-pen{opacity:1}.sf-property-view-field-open:hover .sf-property-view-pen,.sf-property-view-field-open:focus-visible .sf-property-view-pen{opacity:1}.sf-property-view-field-open.focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-px);border-radius:var(--sf-radius-1)}.sf-property-view-field-open:focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-px);border-radius:var(--sf-radius-1)}.sf-field-include{margin:0;max-height:calc(var(--sf-ui-2--control-height)*6);max-block-size:calc(var(--sf-ui-2--control-height)*6);overflow:auto;padding:var(--sf-space-2);border-radius:var(--sf-code--radius);background-color:var(--sf-code--background);color:var(--sf-code--color);font-family:var(--sf-code--font-family);white-space:pre}}
+@layer sf.components{.sf-view-fields-money{width:100%;inline-size:100%;align-items:flex-start}.sf-view-fields-money>.sf-view-fields-decimal,.sf-view-fields-money>.sf-view-fields-decimal>.sf-input{flex:1 1 8rem;min-width:0;min-inline-size:0}.sf-view-fields-money>.sf-view-fields-currency,.sf-view-fields-money>.sf-view-fields-currency>.sf-dropdown{flex:0 0 8.5rem;min-width:0;min-inline-size:0}.sf-view-items-cell .sf-input{width:100%;inline-size:100%;min-width:0;min-inline-size:0}.sf-view-items-cell .sf-dropdown{width:100%;inline-size:100%;min-width:0;min-inline-size:0}.sf-view-items-cell .sf-input-date{width:100%;inline-size:100%;min-width:0;min-inline-size:0}.sf-view-fields-part .sf-input{width:100%;inline-size:100%;min-width:0;min-inline-size:0}.sf-view-fields-part .sf-dropdown{width:100%;inline-size:100%;min-width:0;min-inline-size:0}.sf-view-items-cell .sf-input-field input,.sf-view-fields-part .sf-input-field input{width:100%;inline-size:100%}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items .sf-view-fields-decimal input{text-align:right}@supports not (text-align: end){html:not([dir="rtl"]) .sf-view-items .sf-view-fields-decimal input{text-align:right}}.sf-view-items .sf-view-fields-decimal input:where(:dir(ltr)){text-align:right}_:-ms-input-placeholder, [dir="rtl"] .sf-view-items .sf-view-fields-decimal input{text-align:left}@supports not (text-align: end){[dir="rtl"] .sf-view-items .sf-view-fields-decimal input{text-align:left}}.sf-view-items .sf-view-fields-decimal input:where(:dir(rtl)){text-align:left}.sf-view-items .sf-view-fields-decimal input{text-align:end}.sf-view-fields-amount,.sf-view-items-numeric .sf-view-items-text{-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.sf-view-fields-compound{grid-template-columns:repeat(auto-fill, minmax(min(100%, 11rem), 1fr))}.sf-view-fields-part--wide{grid-column:span 2}.sf-view-fields-part-label{font-size:var(--sf-text-size-1);font-size:var(--sf-label-medium--size, var(--sf-text-size-1));line-height:var(--sf-text-height-1);line-height:var(--sf-label-medium--height, var(--sf-text-height-1))}@container (max-width: 24rem){.sf-view-fields-part--wide{grid-column:auto}}.sf-view-items-box{display:block;container:sf-view-items/inline-size;width:100%;inline-size:100%;min-width:0;min-inline-size:0;flex:1 1 100%}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items{text-align:left}@supports not (text-align: start){html:not([dir="rtl"]) .sf-view-items{text-align:left}}.sf-view-items:where(:dir(ltr)){text-align:left}_:-ms-input-placeholder, [dir="rtl"] .sf-view-items{text-align:right}@supports not (text-align: start){[dir="rtl"] .sf-view-items{text-align:right}}.sf-view-items:where(:dir(rtl)){text-align:right}.sf-view-items{display:grid;width:100%;inline-size:100%;min-width:0;min-inline-size:0;grid-template-columns:1fr;grid-template-columns:var(--sf-view-items-columns, 1fr);grid-column-gap:var(--sf-space-1);-webkit-column-gap:var(--sf-space-1);-moz-column-gap:var(--sf-space-1);column-gap:var(--sf-space-1);text-align:start}.sf-view-items-head,.sf-view-items-row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center}.sf-view-items-head{padding-bottom:var(--sf-space-1);-webkit-padding-after:var(--sf-space-1);padding-block-end:var(--sf-space-1);border-bottom:var(--sf-px) solid var(--sf-outline-variant);-webkit-border-after:var(--sf-px) solid var(--sf-outline-variant);border-block-end:var(--sf-px) solid var(--sf-outline-variant)}.sf-view-items-heading{font-size:var(--sf-text-size-1);font-size:var(--sf-label-medium--size, var(--sf-text-size-1));line-height:var(--sf-text-height-1);line-height:var(--sf-label-medium--height, var(--sf-text-height-1));color:var(--sf-on-surface-variant);min-width:0;min-inline-size:0}.sf-view-items-row{padding-top:var(--sf-space-1);padding-bottom:var(--sf-space-1);padding-block:var(--sf-space-1);border-bottom:var(--sf-px) solid var(--sf-outline-variant);-webkit-border-after:var(--sf-px) solid var(--sf-outline-variant);border-block-end:var(--sf-px) solid var(--sf-outline-variant)}.sf-view-items:not(.sf-view-items--edit) .sf-view-items-row{padding-top:calc(var(--sf-space-1)/2);padding-bottom:calc(var(--sf-space-1)/2);padding-block:calc(var(--sf-space-1)/2)}.sf-view-items-cell{display:flex;flex-direction:column;min-width:0;min-inline-size:0}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items-numeric{text-align:right}@supports not (text-align: end){html:not([dir="rtl"]) .sf-view-items-numeric{text-align:right}}.sf-view-items-numeric:where(:dir(ltr)){text-align:right}_:-ms-input-placeholder, [dir="rtl"] .sf-view-items-numeric{text-align:left}@supports not (text-align: end){[dir="rtl"] .sf-view-items-numeric{text-align:left}}.sf-view-items-numeric:where(:dir(rtl)){text-align:left}.sf-view-items-numeric{text-align:end;align-items:flex-end}.sf-view-items-cell>:not(.sf-view-items-cell-label){width:100%;inline-size:100%;min-width:0;min-inline-size:0}.sf-view-items-text{word-wrap:anywhere}.sf-view-items-cell-label{display:none;font-size:var(--sf-text-size-1);font-size:var(--sf-label-medium--size, var(--sf-text-size-1));line-height:var(--sf-text-height-1);line-height:var(--sf-label-medium--height, var(--sf-text-height-1))}.sf-view-items-totals{border-bottom:0;-webkit-border-after:0;border-block-end:0;font-weight:600}.sf-view-items-foot{grid-column:1/-1;padding-top:var(--sf-space-1);-webkit-padding-before:var(--sf-space-1);padding-block-start:var(--sf-space-1)}@container sf-view-items (max-width: 36rem){.sf-view-items{grid-template-columns:1fr;row-gap:var(--sf-space-1)}.sf-view-items-head{display:none}.sf-view-items-row{grid-template-columns:1fr;row-gap:var(--sf-space-1);padding:var(--sf-space-1) var(--sf-space-2);border:var(--sf-px) solid var(--sf-outline-variant);border-radius:var(--sf-radius-1)}.sf-view-items:not(.sf-view-items--edit) .sf-view-items-row{padding:var(--sf-space-1) var(--sf-space-2)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items-cell,html:not([dir="rtl"]) .sf-view-items-numeric{text-align:left}@supports not (text-align: start){html:not([dir="rtl"]) .sf-view-items-cell,html:not([dir="rtl"]) .sf-view-items-numeric{text-align:left}}.sf-view-items-cell:where(:dir(ltr)),.sf-view-items-numeric:where(:dir(ltr)){text-align:left}_:-ms-input-placeholder, [dir="rtl"] .sf-view-items-cell,[dir="rtl"] .sf-view-items-numeric{text-align:right}@supports not (text-align: start){[dir="rtl"] .sf-view-items-cell,[dir="rtl"] .sf-view-items-numeric{text-align:right}}.sf-view-items-cell:where(:dir(rtl)),.sf-view-items-numeric:where(:dir(rtl)){text-align:right}.sf-view-items-cell,.sf-view-items-numeric{align-items:stretch;text-align:start;gap:calc(var(--sf-space-1)/4)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items-numeric .sf-view-items-text,html:not([dir="rtl"]) .sf-view-items .sf-view-fields-decimal input{text-align:left}@supports not (text-align: start){html:not([dir="rtl"]) .sf-view-items-numeric .sf-view-items-text,html:not([dir="rtl"]) .sf-view-items .sf-view-fields-decimal input{text-align:left}}.sf-view-items-numeric .sf-view-items-text:where(:dir(ltr)),.sf-view-items .sf-view-fields-decimal input:where(:dir(ltr)){text-align:left}_:-ms-input-placeholder, [dir="rtl"] .sf-view-items-numeric .sf-view-items-text,[dir="rtl"] .sf-view-items .sf-view-fields-decimal input{text-align:right}@supports not (text-align: start){[dir="rtl"] .sf-view-items-numeric .sf-view-items-text,[dir="rtl"] .sf-view-items .sf-view-fields-decimal input{text-align:right}}.sf-view-items-numeric .sf-view-items-text:where(:dir(rtl)),.sf-view-items .sf-view-fields-decimal input:where(:dir(rtl)){text-align:right}.sf-view-items-numeric .sf-view-items-text,.sf-view-items .sf-view-fields-decimal input{text-align:start}.sf-view-items-cell-label{display:block}.sf-view-items-cell--blank{display:none}.sf-view-items-actions{justify-content:flex-end}.sf-view-items-totals{border:0;padding-left:var(--sf-space-2);padding-right:var(--sf-space-2);padding-inline:var(--sf-space-2)}.sf-view-items-totals .sf-view-items-total-word{display:none}}}