@simai-studio/view 1.0.0 → 1.1.0

package/dist/smart/view/static/default/open-record.html

@@ -1,5 +1,5 @@
 <!-- sf-view, example «open-record»: the static markup (standard simai.smart-component 1.3.8 §5.4). Generated by scripts/snapshot-first-paint.mjs from the built output; do not edit, run it again. -->
-<sf-view aria-label="Решения" current="r-005" data-sf-awaiting aria-busy="true"><sf-view-table slot="content" aria-label="Решения" style="display: contents;" data-sf-host-toolbar selectable="true" data-sf-host-layout layout="auto" size="1" data-sf-host-vertical-scroll vertical-scroll="page" settings="true" settings-menu="false" creatable="false" row-reorder="false" inline-edit="false" filter-templates="false" data-sf-host-row-actions row-actions="false" data-sf-page-scroll data-sf-sticky-head>
+<sf-view aria-label="Решения" current="r-005" data-sf-awaiting aria-busy="true"><sf-view-table slot="content" aria-label="Решения" style="display: contents;" data-sf-host-toolbar data-sf-host-selectable selectable="true" data-sf-host-layout layout="auto" size="1" data-sf-host-vertical-scroll vertical-scroll="page" data-sf-host-settings settings="true" settings-menu="false" creatable="false" row-reorder="false" inline-edit="false" filter-templates="false" data-sf-host-row-actions row-actions="false" data-sf-page-scroll data-sf-sticky-head>
 <section class="sf-table  min-w-0 flex flex-col gap-1/3 flex-1 min-h-0 " data-state="loading" aria-busy="true" data-sf-static>
 
 <div class="sf-table-toolbar flex gap-1/2 content-main-between flex-none" data-sf-filter-tags="0">
@@ -56,13 +56,11 @@
 <div class="sf-table-resize-guide" aria-hidden="true" hidden></div>
 
 
-<table class="table border-separate border-spacing-0 min-w-full w-max table-fixed transition" aria-label="Решения" style="--sf-table-pin-select: 0px; --sf-table-pin-settings: 0px;">
+<table class="table border-separate border-spacing-0 min-w-full w-max table-fixed transition" aria-label="Решения" style="--sf-table-pin-select: 0px;">
 
 <colgroup>
 
-<col data-key="select" style="width: calc(var(--sf-text-height-1) + var(--sf-b6) + calc(var(--sf-px) * 2))">
-
-<col data-key="settings" style="width: calc(var(--sf-text-height-1) + (var(--sf-ui-1--space-y-tightness-default) * 2) + var(--sf-b6))" data-sf-pin-edge>
+<col data-key="select" style="width: calc(var(--sf-text-height-1) + var(--sf-b6) + calc(var(--sf-px) * 2))" data-sf-pin-edge>
 
 </colgroup>
 
@@ -70,7 +68,7 @@
 <thead class="sticky top-0 z-5">
 <tr>
 
-<th class="relative" data-key="select" data-label="select" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-select, 0px); z-index: 2;">
+<th class="relative" data-key="select" data-label="select" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-select, 0px); z-index: 2;" data-sf-pin-edge>
 <sf-checkbox position="end" root-class="content-main-between" size="1" aria-label="Выбрать все строки" style="display: contents;">
 <label class="sf-checkbox sf-checkbox--size-1 flex content-main-between cursor-pointer" data-sf-static>
 
@@ -83,16 +81,13 @@
 </label>
 </sf-checkbox>
 </th>
-<th class="relative" data-key="settings" data-label="settings" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-settings, 0px); z-index: 2;" data-sf-pin-edge>
-<span class="sf-table-visually-hidden">Настройки</span>
-</th>
 </tr>
 </thead>
 
 
 <tbody data-state="loading" class="sf-table-skeleton">
 <tr aria-hidden="true">
-<td colspan="2">
+<td colspan="1">
 <div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
 <div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/4"></div>
 </div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
@@ -102,7 +97,7 @@
 </div></div></div>
 </td>
 </tr><tr aria-hidden="true">
-<td colspan="2">
+<td colspan="1">
 <div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
 <div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/2"></div>
 </div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
@@ -112,7 +107,7 @@
 </div></div></div>
 </td>
 </tr><tr aria-hidden="true">
-<td colspan="2">
+<td colspan="1">
 <div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
 <div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/3"></div>
 </div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
@@ -122,7 +117,7 @@
 </div></div></div>
 </td>
 </tr><tr aria-hidden="true">
-<td colspan="2">
+<td colspan="1">
 <div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
 <div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/3"></div>
 </div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
@@ -132,7 +127,7 @@
 </div></div></div>
 </td>
 </tr><tr aria-hidden="true">
-<td colspan="2">
+<td colspan="1">
 <div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
 <div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/5"></div>
 </div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
@@ -142,7 +137,7 @@
 </div></div></div>
 </td>
 </tr><tr aria-hidden="true">
-<td colspan="2">
+<td colspan="1">
 <div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
 <div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/5"></div>
 </div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
@@ -153,7 +148,7 @@
 </td>
 </tr>
 </tbody>
-<tbody><tr><td class="sf-table-visually-hidden" colspan="2">
+<tbody><tr><td class="sf-table-visually-hidden" colspan="1">
 <span role="status">Загрузка данных</span>
 </td></tr></tbody>
 

package/dist/smart/view/static/default/reference.html

@@ -1,5 +1,5 @@
 <!-- sf-view, example «reference»: the static markup (standard simai.smart-component 1.3.8 §5.4). Generated by scripts/snapshot-first-paint.mjs from the built output; do not edit, run it again. -->
-<sf-view aria-label="Решения" collection="workbench.solutions" data-sf-awaiting aria-busy="true"><sf-view-table slot="content" aria-label="Решения" style="display: contents;" data-sf-host-toolbar selectable="true" data-sf-host-layout layout="auto" size="1" data-sf-host-vertical-scroll vertical-scroll="page" settings="true" settings-menu="false" creatable="false" row-reorder="false" inline-edit="false" filter-templates="false" data-sf-host-row-actions row-actions="false" data-sf-page-scroll data-sf-sticky-head>
+<sf-view aria-label="Решения" collection="workbench.solutions" data-sf-awaiting aria-busy="true"><sf-view-table slot="content" aria-label="Решения" style="display: contents;" data-sf-host-toolbar data-sf-host-selectable selectable="true" data-sf-host-layout layout="auto" size="1" data-sf-host-vertical-scroll vertical-scroll="page" data-sf-host-settings settings="true" settings-menu="false" creatable="false" row-reorder="false" inline-edit="false" filter-templates="false" data-sf-host-row-actions row-actions="false" data-sf-page-scroll data-sf-sticky-head>
 <section class="sf-table  min-w-0 flex flex-col gap-1/3 flex-1 min-h-0 " data-state="loading" aria-busy="true" data-sf-static>
 
 <div class="sf-table-toolbar flex gap-1/2 content-main-between flex-none" data-sf-filter-tags="0">
@@ -56,13 +56,11 @@
 <div class="sf-table-resize-guide" aria-hidden="true" hidden></div>
 
 
-<table class="table border-separate border-spacing-0 min-w-full w-max table-fixed transition" aria-label="Решения" style="--sf-table-pin-select: 0px; --sf-table-pin-settings: 0px;">
+<table class="table border-separate border-spacing-0 min-w-full w-max table-fixed transition" aria-label="Решения" style="--sf-table-pin-select: 0px;">
 
 <colgroup>
 
-<col data-key="select" style="width: calc(var(--sf-text-height-1) + var(--sf-b6) + calc(var(--sf-px) * 2))">
-
-<col data-key="settings" style="width: calc(var(--sf-text-height-1) + (var(--sf-ui-1--space-y-tightness-default) * 2) + var(--sf-b6))" data-sf-pin-edge>
+<col data-key="select" style="width: calc(var(--sf-text-height-1) + var(--sf-b6) + calc(var(--sf-px) * 2))" data-sf-pin-edge>
 
 </colgroup>
 
@@ -70,7 +68,7 @@
 <thead class="sticky top-0 z-5">
 <tr>
 
-<th class="relative" data-key="select" data-label="select" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-select, 0px); z-index: 2;">
+<th class="relative" data-key="select" data-label="select" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-select, 0px); z-index: 2;" data-sf-pin-edge>
 <sf-checkbox position="end" root-class="content-main-between" size="1" aria-label="Выбрать все строки" style="display: contents;">
 <label class="sf-checkbox sf-checkbox--size-1 flex content-main-between cursor-pointer" data-sf-static>
 
@@ -83,16 +81,13 @@
 </label>
 </sf-checkbox>
 </th>
-<th class="relative" data-key="settings" data-label="settings" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-settings, 0px); z-index: 2;" data-sf-pin-edge>
-<span class="sf-table-visually-hidden">Настройки</span>
-</th>
 </tr>
 </thead>
 
 
 <tbody data-state="loading" class="sf-table-skeleton">
 <tr aria-hidden="true">
-<td colspan="2">
+<td colspan="1">
 <div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
 <div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/4"></div>
 </div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
@@ -102,7 +97,7 @@
 </div></div></div>
 </td>
 </tr><tr aria-hidden="true">
-<td colspan="2">
+<td colspan="1">
 <div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
 <div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/2"></div>
 </div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
@@ -112,7 +107,7 @@
 </div></div></div>
 </td>
 </tr><tr aria-hidden="true">
-<td colspan="2">
+<td colspan="1">
 <div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
 <div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/3"></div>
 </div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
@@ -122,7 +117,7 @@
 </div></div></div>
 </td>
 </tr><tr aria-hidden="true">
-<td colspan="2">
+<td colspan="1">
 <div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
 <div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/3"></div>
 </div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
@@ -132,7 +127,7 @@
 </div></div></div>
 </td>
 </tr><tr aria-hidden="true">
-<td colspan="2">
+<td colspan="1">
 <div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
 <div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/5"></div>
 </div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
@@ -142,7 +137,7 @@
 </div></div></div>
 </td>
 </tr><tr aria-hidden="true">
-<td colspan="2">
+<td colspan="1">
 <div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
 <div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/5"></div>
 </div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
@@ -153,7 +148,7 @@
 </td>
 </tr>
 </tbody>
-<tbody><tr><td class="sf-table-visually-hidden" colspan="2">
+<tbody><tr><td class="sf-table-visually-hidden" colspan="1">
 <span role="status">Загрузка данных</span>
 </td></tr></tbody>
 

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.0",
   "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}}