@simai-studio/view 1.0.0 → 1.2.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.9.1",
+  "version": "1.10.1",
   "kind": "leaf",
   "family": "record",
   "implements": [
@@ -1294,7 +1294,8 @@
     "focus-list": "version 1.8.4: where focus goes when the arranging mode starts or ends is found with the layer stack's one focus list (core layer-stack.js FOCUSABLE, core.runtime 1.19.0; reuse audit 2026-11-02, finding 1), not a list of its own: a hidden input is no stop, an editable region is. No visible change. Needs core.runtime >= 1.19.0.",
     "framework-tag-renames": "version 1.8.5: the Framework elements it draws, finds and listens to are named by their new tags (Smart component naming of 2026-11-02, sf-[set]-<block>): the editors are sf-input-date, sf-input-color, sf-input-country, sf-input-textarea, sf-slider-range and sf-button-copy, the buttons sf-button-icon, the standard menu sf-menu-context. The rule relations and the registry ids follow (cl-<new>, smart.<new>; the package reference pro.package.json of the pair). The former tags stay dated aliases of the Framework until 2027-01-01; public CSS variables and classes keep their names. No visible change. Needs the SIMAI Framework pair with the tag renames (core.runtime 1.21.0).",
     "tag-rename": "version 1.9.0: the tag is sf-view-properties (naming decision 2026-11-02: sf-[set]-<block>[-<variant>]; rename plan R2); the folder view-properties, the id smart.view-properties and the bundle cl-view-properties follow it. sf-property-view stays a dated alias until 2027-01-01: a subclass the Smart base defines beside the new tag, listed in the package rule, in sheets as :is(sf-view-properties, sf-property-view), its events named after the tag followed by their former names (ui-source change journal tag-sf-property-view-to-sf-view-properties, path-smart-property-view-to-view-properties).",
-    "version-1.9.1": "the section glyphs are SIMAI Framework's choice list (core/js/icon-choices.js, core.runtime 1.25.0; duplication audit 2026-11-03 A-1) instead of this view's own js/icon-choices.js, which sf-admin-menu imported across what become two component sets; the day-and-time reading is the field renderers' (field-renderers/datetime.js, A-14) instead of the copy js/datetime-value.js kept from before the lift. Behaviour unchanged."
+    "version-1.9.1": "the section glyphs are SIMAI Framework's choice list (core/js/icon-choices.js, core.runtime 1.25.0; duplication audit 2026-11-03 A-1) instead of this view's own js/icon-choices.js, which sf-admin-menu imported across what become two component sets; the day-and-time reading is the field renderers' (field-renderers/datetime.js, A-14) instead of the copy js/datetime-value.js kept from before the lift. Behaviour unchanged.",
+    "datetime-and-formats": "version 1.10.0: a datetime and a time of day are edited with the renderer set's sf-input-date in its mode (datetime, time): one control each, as SIMAI Framework's duplication audit A-14 asked, instead of this view's own pair of a datepicker and a masked time field, which cut the day short in a half-width field. js/datetime-edit.js, its drafts and its seven words go. A date the host did not format reads in the page's language through format-date, as sf-view-table's cells do (viewHost; the host's formatFieldValue first). A colour with a palette wraps inside its field instead of running over the field beside it. A closed panel draws nothing: sf-drawer leaves its edge strip -- this panel's close and copy-link -- in place when it slides the panel out, so the strip goes at once and the panel when its slide is over. An entry brought back to what the record holds is no change (changeField compares with the field's stored value): a control is drawn with the change it made, so it compared a later entry with that, and a time put back to the stored one was written."
   },
   "x-rule": {
     "$comment": [
@@ -1682,6 +1683,13 @@
           "changes": [
             "The tag is sf-view-properties (rename plan R2, naming decision 2026-11-02: sf-[set]-<block>); the folder view-properties, the id smart.view-properties and the bundle cl-view-properties follow it (were property-view, smart.property-view, cl-property-view). sf-property-view stays a dated alias until 2027-01-01: old markup upgrades as this element, the Loader forwards cl-property-view, and every event fires under its former name as well, with the same detail. Public CSS variables and classes keep their names. Needs the SIMAI Framework pair whose package reference lists the former tag (core.runtime 1.22.0). Nothing to change for a host until 2027-01-01; new markup writes sf-view-properties."
           ]
+        },
+        {
+          "from": "1.9.1",
+          "to": "1.10.0",
+          "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."
+          ]
         }
       ]
     },

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

@@ -565,30 +565,21 @@
        a block: a bare string and an element must align the same way. */
     display: flex;
   }
-  /* A datetime is a day and a time on one row (js/datetime-edit.js): the day
-     as wide as a date field is anywhere in the view, the time as wide as
-     «00:00» in its own font, so it follows the field's size step with the
-     datepicker. Both are the same size on the ladder, so they stand at one
-     height. The row does not wrap: a time under its day reads as a second
-     field. */
-  .sf-property-view-datetime {
-    display: flex;
-    align-items: center;
-    gap: var(--sf-space-2);
+  /* A colour with a palette wraps inside its field: the chip, the code, the
+     swatches and the reset stood on one unwrapping line of 463px in a
+     half-width field of 266, and the swatches ran over the field beside it
+     (the Fields page, 2026-11-05). sf-input-color's painted root is the flex
+     item (the host is display: contents); its row wraps, and the swatches wrap
+     among themselves on a line of their own when they have to. */
+  .sf-property-view-field-value .sf-color {
+    flex-wrap: wrap;
     max-width: 100%;
     max-inline-size: 100%;
     min-width: 0;
     min-inline-size: 0;
   }
-  /* Both hosts are display: contents, so the flex items are what they draw:
-     the datepicker's wrap and the time field's root (its root-class). */
-  .sf-property-view-datetime > sf-input-date > .sf-datepicker-wrap {
-    flex: 0 1 auto;
-    min-width: 0;
-    min-inline-size: 0;
-  }
-  .sf-property-view-datetime .sf-property-view-datetime-time-field {
-    flex: 0 0 6.5em;
+  .sf-property-view-field-value .sf-color-swatches {
+    flex-wrap: wrap;
     min-width: 0;
     min-inline-size: 0;
   }
@@ -1023,6 +1014,20 @@
   .sf-property-view-edge sf-button-icon button {
     border-radius: 50%;
   }
+  /* Closed is nothing drawn. sf-drawer slides a closed panel past the window's
+     edge, and its edge strip -- this panel's close and copy-link -- stays where
+     it stood, so a closed panel left its round close button over the page, and
+     the panel's shadow along the window's edge (2026-11-05). The strip goes at
+     once; the panel when its slide out is over, so the close still moves. */
+  .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);
+  }
   /* A panel filling the screen has the strip inside it, in a row along its top
      at the drawer's inline step (space-1). The head starts its line after the
      strip and a step more, so the record's name is not under the controls

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

@@ -1,2 +1,2 @@
 @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-datetime{display:flex;align-items:center;gap:var(--sf-space-2);max-width:100%;max-inline-size:100%;min-width:0;min-inline-size:0}.sf-property-view-datetime>sf-input-date>.sf-datepicker-wrap{flex:0 1 auto;min-width:0;min-inline-size:0}.sf-property-view-datetime .sf-property-view-datetime-time-field{flex:0 0 6.5em;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%}_:-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-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}}