@simai-studio/ui 5.20261023.212 → 5.20261025.207

package/distr/rule/rule.json

@@ -969,6 +969,7 @@
   },
   {
     "name": "cl-dropdown",
+    "css": true,
     "js": true,
     "mode": "smart",
     "relation": [
@@ -1146,6 +1147,24 @@
     ],
     "type": "smart"
   },
+  {
+    "name": "cl-image-field",
+    "css": true,
+    "js": true,
+    "mode": "smart",
+    "relation": [
+      {
+        "name": "cl-buttons"
+      },
+      {
+        "name": "cl-icons"
+      }
+    ],
+    "tags": [
+      "sf-image-field"
+    ],
+    "type": "smart"
+  },
   {
     "name": "cl-inline-editor",
     "css": true,
@@ -1168,6 +1187,9 @@
       },
       {
         "name": "cl-icons"
+      },
+      {
+        "name": "icon-buttons"
       }
     ],
     "tags": [
@@ -1432,7 +1454,20 @@
     "css": true,
     "js": true,
     "mode": "smart",
-    "relation": [],
+    "relation": [
+      {
+        "lazy": true,
+        "name": "icon-buttons"
+      },
+      {
+        "lazy": true,
+        "name": "icons"
+      },
+      {
+        "lazy": true,
+        "name": "cl-context-menu"
+      }
+    ],
     "tags": [
       "sf-sortable"
     ],
@@ -1471,6 +1506,7 @@
   },
   {
     "name": "cl-switch",
+    "css": true,
     "js": true,
     "mode": "smart",
     "relation": [
@@ -1479,6 +1515,9 @@
       },
       {
         "name": "icons"
+      },
+      {
+        "name": "icon-buttons"
       }
     ],
     "tags": [
@@ -1547,11 +1586,18 @@
   },
   {
     "name": "cl-textarea",
+    "css": true,
     "js": true,
     "mode": "smart",
     "relation": [
       {
         "name": "textarea"
+      },
+      {
+        "name": "icons"
+      },
+      {
+        "name": "icon-buttons"
       }
     ],
     "tags": [

package/distr/smart/color/css/color.min.css

@@ -1 +1,2 @@
+@layer sf.components{.sf-field-inherited-slot{flex:none;gap:var(--sf-space-1\/4);min-width:0;min-inline-size:0}.sf-field-inherited-slot--size-1\/2{--sf-field-inherited-slot--inset: calc((var(--sf-ui-1\/2--control-height) - var(--sf-ui-1\/3--control-height)) / 2 - var(--sf-px))}.sf-field-inherited-slot--size-1{--sf-field-inherited-slot--inset: calc((var(--sf-ui-1--control-height) - var(--sf-ui-1\/2--control-height)) / 2 - var(--sf-px))}.sf-field-inherited-slot--size-2{--sf-field-inherited-slot--inset: calc((var(--sf-ui-2--control-height) - var(--sf-ui-1--control-height)) / 2 - var(--sf-px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-field-inherited{padding-right:0px;padding-right:var(--sf-field-inherited-slot--inset, 0px)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-field-inherited{padding-right:0px;padding-right:var(--sf-field-inherited-slot--inset, 0px)}}.sf-field-inherited:where(:dir(ltr)){padding-right:0px;padding-right:var(--sf-field-inherited-slot--inset, 0px)}_:-ms-input-placeholder, [dir="rtl"] .sf-field-inherited{padding-left:0px;padding-left:var(--sf-field-inherited-slot--inset, 0px)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-field-inherited{padding-left:0px;padding-left:var(--sf-field-inherited-slot--inset, 0px)}}.sf-field-inherited:where(:dir(rtl)){padding-left:0px;padding-left:var(--sf-field-inherited-slot--inset, 0px)}.sf-field-inherited{color:var(--sf-on-surface-variant);white-space:nowrap;-webkit-padding-end:0px;padding-inline-end:0px;-webkit-padding-end:var(--sf-field-inherited-slot--inset, 0px);padding-inline-end:var(--sf-field-inherited-slot--inset, 0px)}.sf-field-inherited--size-1\/3{font-size:var(--sf-text-size-1\/3);line-height:var(--sf-text-height-1\/3)}.sf-field-inherited--size-1\/2{font-size:var(--sf-text-size-1\/2);line-height:var(--sf-text-height-1\/2)}.sf-field-inherited--size-1{font-size:var(--sf-text-size-1);line-height:var(--sf-text-height-1)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-field-inherited-slot>.sf-field-reset{margin-right:0px;margin-right:var(--sf-field-inherited-slot--inset, 0px)}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-field-inherited-slot>.sf-field-reset{margin-right:0px;margin-right:var(--sf-field-inherited-slot--inset, 0px)}}.sf-field-inherited-slot>.sf-field-reset:where(:dir(ltr)){margin-right:0px;margin-right:var(--sf-field-inherited-slot--inset, 0px)}_:-ms-input-placeholder, [dir="rtl"] .sf-field-inherited-slot>.sf-field-reset{margin-left:0px;margin-left:var(--sf-field-inherited-slot--inset, 0px)}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-field-inherited-slot>.sf-field-reset{margin-left:0px;margin-left:var(--sf-field-inherited-slot--inset, 0px)}}.sf-field-inherited-slot>.sf-field-reset:where(:dir(rtl)){margin-left:0px;margin-left:var(--sf-field-inherited-slot--inset, 0px)}.sf-field-inherited-slot>.sf-field-reset{flex:none;-webkit-margin-end:0px;margin-inline-end:0px;-webkit-margin-end:var(--sf-field-inherited-slot--inset, 0px);margin-inline-end:var(--sf-field-inherited-slot--inset, 0px)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input-field>.sf-field-inherited-slot{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-input-field>.sf-field-inherited-slot{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}}.sf-input-field>.sf-field-inherited-slot:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-input-field>.sf-field-inherited-slot{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-input-field>.sf-field-inherited-slot{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}}.sf-input-field>.sf-field-inherited-slot:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}.sf-input-field>.sf-field-inherited-slot{align-self:center;-webkit-margin-end:calc(-1*0px);margin-inline-end:calc(-1*0px);-webkit-margin-end:calc(-1*var(--sf-input-field--padding-inline-end, 0px));margin-inline-end:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input-field>.sf-field-inherited-slot>.sf-field-inherited{padding-right:0px;padding-right:var(--sf-input-field--padding-inline-end, 0px)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-input-field>.sf-field-inherited-slot>.sf-field-inherited{padding-right:0px;padding-right:var(--sf-input-field--padding-inline-end, 0px)}}.sf-input-field>.sf-field-inherited-slot>.sf-field-inherited:where(:dir(ltr)){padding-right:0px;padding-right:var(--sf-input-field--padding-inline-end, 0px)}_:-ms-input-placeholder, [dir="rtl"] .sf-input-field>.sf-field-inherited-slot>.sf-field-inherited{padding-left:0px;padding-left:var(--sf-input-field--padding-inline-end, 0px)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-input-field>.sf-field-inherited-slot>.sf-field-inherited{padding-left:0px;padding-left:var(--sf-input-field--padding-inline-end, 0px)}}.sf-input-field>.sf-field-inherited-slot>.sf-field-inherited:where(:dir(rtl)){padding-left:0px;padding-left:var(--sf-input-field--padding-inline-end, 0px)}.sf-input-field>.sf-field-inherited-slot>.sf-field-inherited{-webkit-padding-end:0px;padding-inline-end:0px;-webkit-padding-end:var(--sf-input-field--padding-inline-end, 0px);padding-inline-end:var(--sf-input-field--padding-inline-end, 0px)}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>input{--sf-dropdown-input--padding-inline-end: 0px;min-width:0;min-inline-size:0}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>input{--sf-dropdown-input--padding-inline-end: 0px;min-width:0;min-width:0;min-inline-size:0}.sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>input{--sf-dropdown-input--padding-inline-end: 0px;min-width:0;min-inline-size:0}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{position:static;flex:none;margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-block:calc(-1*var(--sf-dropdown-field--padding-top, 0px)) calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));-webkit-margin-end:calc(-1*0px);margin-inline-end:calc(-1*0px);-webkit-margin-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px));margin-inline-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{position:static;flex:none;margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-block:calc(-1*var(--sf-dropdown-field--padding-top, 0px)) calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));-webkit-margin-end:calc(-1*0px);margin-inline-end:calc(-1*0px);margin-inline-end:calc(-1*0px);-webkit-margin-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px));margin-inline-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{position:static;flex:none;margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-block:calc(-1*var(--sf-dropdown-field--padding-top, 0px)) calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));-webkit-margin-end:calc(-1*0px);margin-inline-end:calc(-1*0px);margin-inline-end:calc(-1*0px);-webkit-margin-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px));margin-inline-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}.sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button{position:static;flex:none;margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-block:calc(-1*var(--sf-dropdown-field--padding-top, 0px)) calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));-webkit-margin-end:calc(-1*0px);margin-inline-end:calc(-1*0px);-webkit-margin-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px));margin-inline-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot{margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-block:calc(-1*var(--sf-dropdown-field--padding-top, 0px)) calc(-1*var(--sf-dropdown-field--padding-bottom, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited{padding-right:var(--sf-space-1\/4)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited{padding-right:var(--sf-space-1\/4)}}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited:where(:dir(ltr)){padding-right:var(--sf-space-1\/4)}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited{padding-left:var(--sf-space-1\/4)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited{padding-left:var(--sf-space-1\/4)}}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited:where(:dir(rtl)){padding-left:var(--sf-space-1\/4)}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited{-webkit-padding-end:var(--sf-space-1\/4);padding-inline-end:var(--sf-space-1\/4)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{margin-right:0}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{margin-right:0}}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset:where(:dir(ltr)){margin-right:0}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{margin-left:0}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{margin-left:0}}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset:where(:dir(rtl)){margin-left:0}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{-webkit-margin-end:0;margin-inline-end:0}.sf-dropdown.sf-dropdown--size-1\/2 .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{--sf-field-reset--padding: var(--sf-ui-1\/3--space-y-tightness-default)}.sf-dropdown.sf-dropdown--size-1 .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{--sf-field-reset--padding: var(--sf-ui-1\/2--space-y-tightness-default)}.sf-dropdown.sf-dropdown--size-2 .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{--sf-field-reset--padding: var(--sf-ui-1--space-y-tightness-default)}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{--sf-icon-button--padding-top: var(--sf-field-reset--padding);--sf-icon-button--padding-bottom: var(--sf-field-reset--padding);--sf-icon-button--padding-inline-start: var(--sf-field-reset--padding);--sf-icon-button--padding-inline-end: var(--sf-field-reset--padding)}.sf-textarea-inherited,.sf-switch-inherited,.sf-color-inherited-slot{--sf-field-inherited-slot--inset: 0px}.sf-textarea-inherited{justify-content:flex-end}sf-switch[data-inherited] .sf-switch-toggler{opacity:.64}}
 @layer sf.components{sf-color{display:block}.sf-color{display:flex;align-items:center;gap:var(--sf-space-1);min-height:var(--sf-ui-1--control-height);min-block-size:var(--sf-ui-1--control-height)}.sf-color--size-1\/2{--sf-color--control-height: var(--sf-ui-1\/2--control-height);min-height:var(--sf-ui-1\/2--control-height);min-block-size:var(--sf-ui-1\/2--control-height)}.sf-color--size-2{--sf-color--control-height: var(--sf-ui-2--control-height);min-height:var(--sf-ui-2--control-height);min-block-size:var(--sf-ui-2--control-height)}.sf-color-swatch{position:relative;display:inline-flex;cursor:pointer}.sf-color-input{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;inline-size:100%;height:100%;block-size:100%;opacity:0;cursor:pointer}.sf-color-chip{width:var(--sf-ui-1--control-height);inline-size:var(--sf-ui-1--control-height);width:var(--sf-ui-1--control-height);width:var(--sf-color--control-height, var(--sf-ui-1--control-height));inline-size:var(--sf-color--control-height, var(--sf-ui-1--control-height));height:var(--sf-ui-1--control-height);block-size:var(--sf-ui-1--control-height);height:var(--sf-ui-1--control-height);height:var(--sf-color--control-height, var(--sf-ui-1--control-height));block-size:var(--sf-color--control-height, var(--sf-ui-1--control-height));border-radius:var(--sf-radius-1);border:var(--sf-px) solid var(--sf-outline-variant);background-color:transparent;background-color:var(--sf-color-chip, transparent)}.sf-color-chip[data-empty]{background-image:linear-gradient(45deg, transparent 45%, var(--sf-outline-variant) 45%, var(--sf-outline-variant) 55%, transparent 55%)}.sf-color-input.focus-visible+.sf-color-chip,.sf-color-swatch[focus-within] .sf-color-chip{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-px)}.sf-color-input.focus-visible+.sf-color-chip,.sf-color-swatch:focus-within .sf-color-chip{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-px)}.sf-color-input.focus-visible+.sf-color-chip,.sf-color-swatch[focus-within] .sf-color-chip{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-px)}.sf-color-input:focus-visible+.sf-color-chip,.sf-color-swatch[focus-within] .sf-color-chip{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-px)}.sf-color-input:focus-visible+.sf-color-chip,.sf-color-swatch:focus-within .sf-color-chip{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-px)}.sf-color-text code{font-family:ui-monospace, monospace;font-family:var(--sf-font-family-mono, ui-monospace, monospace)}.sf-color-inherited{color:var(--sf-on-surface-variant)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-color-swatches{margin-left:var(--sf-space-1)}@supports not (margin-inline-start: initial){html:not([dir="rtl"]) .sf-color-swatches{margin-left:var(--sf-space-1)}}.sf-color-swatches:where(:dir(ltr)){margin-left:var(--sf-space-1)}_:-ms-input-placeholder, [dir="rtl"] .sf-color-swatches{margin-right:var(--sf-space-1)}@supports not (margin-inline-start: initial){[dir="rtl"] .sf-color-swatches{margin-right:var(--sf-space-1)}}.sf-color-swatches:where(:dir(rtl)){margin-right:var(--sf-space-1)}.sf-color-swatches{display:inline-flex;gap:4px;gap:var(--sf-space-1\/2, 4px);-webkit-margin-start:var(--sf-space-1);margin-inline-start:var(--sf-space-1)}.sf-color-preset{width:var(--sf-ui-1\/2--control-height);inline-size:var(--sf-ui-1\/2--control-height);height:var(--sf-ui-1\/2--control-height);block-size:var(--sf-ui-1\/2--control-height);padding:0;border-radius:var(--sf-radius-1);border:var(--sf-px) solid var(--sf-outline-variant);background-color:var(--sf-color-chip);cursor:pointer}.sf-color-preset[aria-pressed=true]{outline:calc(var(--sf-px)*2) solid var(--sf-primary);outline-offset:var(--sf-px)}.sf-color--plain .sf-color-chip{border-color:rgba(0,0,0,0)}.sf-color--outlined .sf-color-chip{border-color:var(--sf-outline)}@media(forced-colors: active){.sf-color-chip,.sf-color-preset{border-color:CanvasText}}}

package/distr/smart/color/js/color.min.js

@@ -1,30 +1,30 @@
-(()=>{"use strict";var e={"3dd6551de8f2"(e,t,a){a.a(e,async(e,t)=>{try{var i=a("fbe0570fcc69"),r=a("0d662e4d7d63"),s=a("b16e9ecc75e4"),l=e([i,r,s]);[i,r,s]=l.then?(await l)():l;var n=a.n(i);const o={en:{choose:"Choose a colour",clear:"Use the inherited colour",inherited:"inherited",custom:"Custom"},ru:{choose:"Выбрать цвет",clear:"Вернуть унаследованный",inherited:"наследуется",custom:"Свой"}},u=/^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/iu,c=e=>{const t=String(e??"").trim();if(!t)return"";const a=t.startsWith("#")?t:`#${t}`;return u.test(a)?a.toLowerCase():""};class h extends(n()){static get props(){return{templateName:{attribute:"template",default:"default"},value:{default:""},size:{default:"1",values:["1/2","1","2"]},appearance:{default:"bordered",values:["bordered","outlined","plain"]},swatches:{default:""},inheritedValue:{attribute:"inherited-value",default:""},clearable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},name:{default:""},label:{default:""},chooseLabel:{attribute:"choose-label",default:""},clearLabel:{attribute:"clear-label",default:""},inheritedText:{attribute:"inherited-text",default:""}}}static get observedAttributes(){return[...super.observedAttributes??[],"value","inherited-value","swatches","disabled"]}attributeChangedCallback(e,t,a){super.attributeChangedCallback?.(e,t,a),t!==a&&this.isConnected&&this.requestComponentUpdate("attribute")}get value(){return c(this.getAttribute("value"))}get size(){return this.getAttribute("size")||"1"}get appearance(){return this.getAttribute("appearance")||"bordered"}get disabled(){return this.hasAttribute("disabled")}get clearable(){return this.hasAttribute("clearable")}get name(){return this.getAttribute("name")||""}get label(){return this.getAttribute("label")||""}get inheritedValue(){return c(this.getAttribute("inherited-value"))}get inheritedText(){return this.getAttribute("inherited-text")||(0,r.pageText)(o,"inherited",this)}get chooseLabel(){return this.getAttribute("choose-label")||(0,r.pageText)(o,"choose",this)}get clearLabel(){return this.getAttribute("clear-label")||(0,r.pageText)(o,"clear",this)}get customText(){return(0,r.pageText)(o,"custom",this)}get swatchList(){return String(this.getAttribute("swatches")||"").split(",").flatMap(e=>e.includes("|")?[e.trim()]:e.trim().split(/\s+/u)).filter(Boolean).map(e=>{const[t,...a]=e.split("|"),i=c(t),r=a.join("|").trim();return i?{value:i,name:r||i}:null}).filter(Boolean)}get shown(){return this.value||this.inheritedValue||""}get isSet(){return Boolean(this.value)}setValue(e){const t=this._write(e);return this._commit(),t}_write(e){const t=c(e);return t!==this.value&&(t?this.setAttribute("value",t):this.removeAttribute("value"),this.requestComponentUpdate("value"),this._emit("input"),!0)}_commit(){const e=this.value;e!==(this._committed??c(this._initialValue))&&(this._committed=e,this._emit("change"))}_emit(e){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,detail:{value:this.value,name:this.name}}))}connectedCallback(){void 0===this._initialValue&&(this._initialValue=this.getAttribute("value")??""),super.connectedCallback?.()}_pickerInput(e){e.stopPropagation(),this._write(e.target.value)}_pickerChange(e){e.stopPropagation(),this._write(e.target.value),this._commit()}clear(){return this.setValue("")}templateContext(){return this.createTemplateContext({...this.getPropsContext(),component:this,value:this.value,shown:this.shown,isSet:this.isSet,inheritedValue:this.inheritedValue,inheritedText:this.inheritedText,chooseLabel:this.chooseLabel,clearLabel:this.clearLabel,customText:this.customText,swatchList:this.swatchList,clearable:this.clearable,disabled:this.disabled,size:this.size,appearance:this.appearance,name:this.name,label:this.label})}template(){return(0,s.m)(this.templateContext())}}h.define("sf-color"),t()}catch(e){t(e)}})},b16e9ecc75e4(e,t,a){a.a(e,async(e,i)=>{try{a.d(t,{m:()=>n});var r=a("ddf1cdb42ecc"),s=e([r]),l=s.then?(await s)():s;r=l[0];function n(e){const{shown:t,isSet:a,disabled:i,size:s,appearance:l}=e;return r.html`
-        <div class="sf-color sf-color--${l} sf-color--size-${s}"
-             data-set=${a?"true":"false"}>
+(()=>{"use strict";var e={"3dd6551de8f2"(e,t,i){i.a(e,async(e,t)=>{try{var r=i("fbe0570fcc69"),a=i("0d662e4d7d63"),s=i("778671c79fa6"),n=i("b16e9ecc75e4"),l=e([r,a,s,n]);[r,a,s,n]=l.then?(await l)():l;var h=i.n(r);const o={en:{choose:"Choose a colour",clear:"Use the inherited colour",inherited:"inherited",custom:"Custom"},ru:{choose:"Выбрать цвет",clear:"Вернуть унаследованный",inherited:"наследуется",custom:"Свой"}},u=/^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/iu,d=e=>{const t=String(e??"").trim();if(!t)return"";const i=t.startsWith("#")?t:`#${t}`;return u.test(i)?i.toLowerCase():""};class c extends((0,s.kU)(h())){static get props(){return{templateName:{attribute:"template",default:"default"},value:{default:""},size:{default:"1",values:["1/2","1","2"]},appearance:{default:"bordered",values:["bordered","outlined","plain"]},swatches:{default:""},inheritedValue:{attribute:"inherited-value",default:""},clearable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},name:{default:""},label:{default:""},chooseLabel:{attribute:"choose-label",default:""},clearLabel:{attribute:"clear-label",default:""},inheritedText:{attribute:"inherited-text",default:""},resetLabel:{attribute:"reset-label",default:""}}}static get observedAttributes(){return[...super.observedAttributes??[],"value","inherited-value","swatches","disabled"]}attributeChangedCallback(e,t,i){super.attributeChangedCallback?.(e,t,i),t!==i&&this.isConnected&&this.requestComponentUpdate("attribute")}get value(){return d(this.getAttribute("value"))}get size(){return this.getAttribute("size")||"1"}get appearance(){return this.getAttribute("appearance")||"bordered"}get disabled(){return this.hasAttribute("disabled")}get clearable(){return this.hasAttribute("clearable")}get name(){return this.getAttribute("name")||""}get label(){return this.getAttribute("label")||""}get inheritedValue(){return d(this.getAttribute("inherited-value"))}get inheritedText(){return this.getAttribute("inherited-text")||(0,a.pageText)(o,"inherited",this)}get resetLabel(){return this.getAttribute("reset-label")||this.getAttribute("clear-label")||(0,a.pageText)(s.PV,"reset",this)}inheritedOwnValue(){return this.value}inheritedFocusTarget(){return this.querySelector(".sf-color-input")}clearOwnValue(){this.clear()}afterRender(){this.syncInheritedState()}get chooseLabel(){return this.getAttribute("choose-label")||(0,a.pageText)(o,"choose",this)}get clearLabel(){return this.getAttribute("clear-label")||(0,a.pageText)(o,"clear",this)}get customText(){return(0,a.pageText)(o,"custom",this)}get swatchList(){return String(this.getAttribute("swatches")||"").split(",").flatMap(e=>e.includes("|")?[e.trim()]:e.trim().split(/\s+/u)).filter(Boolean).map(e=>{const[t,...i]=e.split("|"),r=d(t),a=i.join("|").trim();return r?{value:r,name:a||r}:null}).filter(Boolean)}get shown(){return this.value||this.inheritedValue||""}get isSet(){return Boolean(this.value)}setValue(e){const t=this._write(e);return this._commit(),t}_write(e){const t=d(e);return t!==this.value&&(t?this.setAttribute("value",t):this.removeAttribute("value"),this.requestComponentUpdate("value"),this._emit("input"),!0)}_commit(){const e=this.value;e!==(this._committed??d(this._initialValue))&&(this._committed=e,this._emit("change"))}_emit(e){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,detail:{value:this.value,name:this.name}}))}connectedCallback(){void 0===this._initialValue&&(this._initialValue=this.getAttribute("value")??""),super.connectedCallback?.()}_pickerInput(e){e.stopPropagation(),this._write(e.target.value)}_pickerChange(e){e.stopPropagation(),this._write(e.target.value),this._commit()}clear(){return this.setValue("")}templateContext(){return this.createTemplateContext({...this.getPropsContext(),component:this,value:this.value,shown:this.shown,isSet:this.isSet,inheritedValue:this.inheritedValue,inheritedText:this.inheritedText,hasInheritedValue:this.hasInheritedValue,chooseLabel:this.chooseLabel,clearLabel:this.clearLabel,customText:this.customText,swatchList:this.swatchList,clearable:this.clearable,disabled:this.disabled,size:this.size,appearance:this.appearance,name:this.name,label:this.label})}template(){return(0,n.m)(this.templateContext())}}c.define("sf-color"),t()}catch(e){t(e)}})},b16e9ecc75e4(e,t,i){i.a(e,async(e,r)=>{try{i.d(t,{m:()=>l});var a=i("ddf1cdb42ecc"),s=i("778671c79fa6"),n=e([a,s]);[a,s]=n.then?(await n)():n;function l(e){const{shown:t,isSet:i,disabled:r,size:n,appearance:l}=e;return a.html`
+        <div class="sf-color sf-color--${l} sf-color--size-${n}"
+             data-set=${i?"true":"false"}>
             <label class="sf-color-swatch" title=${e.chooseLabel}>
                 <span class="sf-color-chip"
-                      style=${t?`--sf-color-chip: ${t}`:r.nothing}
-                      data-empty=${t?r.nothing:"true"}
+                      style=${t?`--sf-color-chip: ${t}`:a.nothing}
+                      data-empty=${t?a.nothing:"true"}
                       aria-hidden="true"></span>
                 <input
                         type="color"
                         class="sf-color-input"
                         .value=${t||"#000000"}
-                        ?disabled=${i}
+                        ?disabled=${r}
                         aria-label=${e.label||e.chooseLabel}
                         @input=${t=>e.component._pickerInput(t)}
                         @change=${t=>e.component._pickerChange(t)}
                 >
             </label>
-            ${e.name?r.html`<input type="hidden" name=${e.name} .value=${e.value}>`:r.nothing}
+            ${e.name?a.html`<input type="hidden" name=${e.name} .value=${e.value}>`:a.nothing}
 
             <span class="sf-color-text">
-                ${a?r.html`<code>${e.value}</code>`:r.html`<span class="sf-color-inherited">${e.inheritedText}</span>`}
+                ${i?a.html`<code>${e.value}</code>`:e.hasInheritedValue?a.nothing:a.html`<span class="sf-color-inherited">${e.inheritedText}</span>`}
             </span>
 
-            ${e.swatchList.length?r.html`
+            ${e.swatchList.length?a.html`
                         <span class="sf-color-swatches" role="group" aria-label=${e.chooseLabel}>
-                            ${e.swatchList.map(t=>r.html`
+                            ${e.swatchList.map(t=>a.html`
                                 <button
                                         type="button"
                                         class="sf-color-preset"
@@ -32,21 +32,40 @@
                                         title=${t.name}
                                         aria-label=${t.name}
                                         aria-pressed=${e.value===t.value?"true":"false"}
-                                        ?disabled=${i}
+                                        ?disabled=${r}
                                         @click=${()=>e.component.setValue(t.value)}
                                 ></button>
                             `)}
-                        </span>`:r.nothing}
+                        </span>`:a.nothing}
 
-            ${e.clearable&&a?r.html`
+            ${e.hasInheritedValue?(0,s.vZ)(e.component,{size:n,disabled:r,className:"sf-color-inherited-slot"}):a.nothing}
+
+            ${e.clearable&&i&&!e.hasInheritedValue?a.html`
                         <sf-icon-button
                                 appearance="link"
-                                size=${s}
+                                size=${n}
                                 icon="restart_alt"
                                 data-action="clear"
                                 aria-label=${e.clearLabel}
-                                ?disabled=${i}
+                                ?disabled=${r}
                                 @click=${()=>e.component.clear()}
-                        ></sf-icon-button>`:r.nothing}
+                        ></sf-icon-button>`:a.nothing}
         </div>
-    `}i()}catch(o){i(o)}})},ddf1cdb42ecc(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("lit")),{once:!0}))},"0d662e4d7d63"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("page-language"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("page-language")),{once:!0}))},fbe0570fcc69(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const t={};function a(i){const r=t[i];if(void 0!==r)return r.exports;const s=t[i]={exports:{}};return e[i](s,s.exports,a),s.exports}(()=>{const e="function"==typeof Symbol,t=e?Symbol("webpack queues"):"__webpack_queues__",i=e?Symbol("webpack exports"):"__webpack_exports__",r=e?Symbol("webpack error"):"__webpack_error__",s=e=>{e?.d<1&&(e.d=1,e.forEach(e=>e.r--),e.forEach(e=>e.r--?e.r++:e()))};a.a=(e,a,l)=>{let n;l&&((n=[]).d=-1);const o=new Set,u=e.exports;let c,h,d;const b=new Promise((e,t)=>{d=t,h=e});b[i]=u,b[t]=e=>(n&&e(n),o.forEach(e),b.catch(e=>{})),e.exports=b;a(e=>{let a;c=(e=>e.map(e=>{if(null!==e&&"object"==typeof e){if(e[t])return e;if(e.then){const a=[];a.d=0,e.then(e=>{l[i]=e,s(a)},e=>{l[r]=e,s(a)});const l={};return l[t]=e=>e(a),l}}const a={};return a[t]=e=>{},a[i]=e,a}))(e);const l=()=>c.map(e=>{if(e[r])throw e[r];return e[i]}),u=new Promise(e=>{a=()=>e(l),a.r=0;const i=e=>e!==n&&!o.has(e)&&(o.add(e),e&&!e.d&&(a.r++,e.push(a)));c.map(e=>e[t](i))});return a.r?u:l()},e=>(e?d(b[r]=e):h(u),s(n))),n?.d<0&&(n.d=0)}})(),a.n=e=>{const t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{if(Array.isArray(t))for(var i=0;i<t.length;){var r=t[i++],s=t[i++];a.o(e,r)?0===s&&i++:0===s?Object.defineProperty(e,r,{enumerable:!0,value:t[i++]}):Object.defineProperty(e,r,{enumerable:!0,get:s})}else for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);a("3dd6551de8f2")})();
+    `}r()}catch(h){r(h)}})},"778671c79fa6"(e,t,i){i.a(e,async(e,r)=>{try{i.d(t,{vZ:()=>c});var a=i("ddf1cdb42ecc"),s=i("0d662e4d7d63"),n=e([a,s]);[a,s]=n.then?(await n)():n;const l="sf-field:reset",h={en:{inherited:"inherited",reset:"Reset to inherited",described:"Inherited: {value}"},ru:{inherited:"наследуется",reset:"Сбросить к наследуемому",described:"Наследуется: {value}"}},o=Object.freeze({"1/2":"1/3",1:"1/2",2:"1"}),u=e=>o[String(e)]||"1/2",d=e=>class extends e{constructor(){super(),this.__sfInheritedSync=()=>this.syncInheritedState(),this.addEventListener("input",this.__sfInheritedSync),this.addEventListener("change",this.__sfInheritedSync)}get inheritedValue(){return this.getAttribute("inherited-value")||""}set inheritedValue(e){null==e||""===e?this.removeAttribute("inherited-value"):this.setAttribute("inherited-value",String(e))}get inheritedText(){return this.getAttribute("inherited-text")||(0,s.pageText)(h,"inherited",this)}get resetLabel(){return this.getAttribute("reset-label")||(0,s.pageText)(h,"reset",this)}get hasInheritedValue(){return""!==this.inheritedValue}get isInherited(){return this.hasInheritedValue&&""===this.inheritedOwnValue()}inheritedOwnValue(){return String(this.value??"")}inheritedDisplayValue(){return this.inheritedValue}inheritedFocusTarget(){return null}clearOwnValue(){this.value=""}inheritedDescription(){return(0,s.pageText)(h,"described",this).replace("{value}",this.inheritedDisplayValue())}resetToInherited(){if(!this.hasInheritedValue||""===this.inheritedOwnValue())return!1;if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return!1;const e=new CustomEvent(l,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.inheritedOwnValue(),inheritedValue:this.inheritedValue,name:this.getAttribute("name")||""}});if(!this.dispatchEvent(e))return!1;this.clearOwnValue(),this.syncInheritedState();const t=()=>this.inheritedFocusTarget()?.focus?.({preventScroll:!0});return t(),this.contains(document.activeElement)||requestAnimationFrame(t),!0}syncInheritedState(){if(!this.hasInheritedValue&&!this.__sfInheritedDescribed)return void this.removeAttribute("data-inherited");const e=this.isInherited,t=this.hasInheritedValue&&!e;e?this.setAttribute("data-inherited","true"):this.removeAttribute("data-inherited"),this.querySelectorAll(":scope [data-inherited-marker]").forEach(t=>{t.hidden=!e}),this.querySelectorAll(":scope [data-inherited-reset]").forEach(e=>{e.hidden=!t});const i=this.inheritedFocusTarget();i&&(e?(i.setAttribute("aria-description",this.inheritedDescription()),this.__sfInheritedDescribed=i):this.__sfInheritedDescribed===i&&(i.removeAttribute("aria-description"),this.__sfInheritedDescribed=null))}};function c(e,{size:t="1",disabled:i=!1,className:r=""}={}){if(!e?.hasInheritedValue)return a.nothing;const s=u(t),n=e.isInherited;return a.html`
+    <span class="sf-field-inherited-slot sf-field-inherited-slot--size-${t} flex items-cross-center ${r}">
+      <span class="sf-field-inherited sf-field-inherited--size-${s}"
+            data-inherited-marker
+            aria-hidden="true"
+            ?hidden=${!n}>${e.inheritedText}</span>
+      <button
+        type="button"
+        class="sf-field-reset sf-icon-button sf-icon-button--icon sf-icon-button--on-surface sf-icon-button--link sf-icon-button--size-${s}"
+        data-inherited-reset
+        aria-label=${e.resetLabel}
+        title=${e.resetLabel}
+        ?hidden=${n}
+        ?disabled=${i}
+        @click=${t=>{t.preventDefault(),t.stopPropagation(),e.resetToInherited()}}
+      ><i class="sf-icon" aria-hidden="true">restart_alt</i></button>
+    </span>
+  `}i.d(t,["PV",0,h,"kU",0,d]),r()}catch(b){r(b)}})},ddf1cdb42ecc(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("lit")),{once:!0}))},"0d662e4d7d63"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("page-language"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("page-language")),{once:!0}))},fbe0570fcc69(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const t={};function i(r){const a=t[r];if(void 0!==a)return a.exports;const s=t[r]={exports:{}};return e[r](s,s.exports,i),s.exports}(()=>{const e="function"==typeof Symbol,t=e?Symbol("webpack queues"):"__webpack_queues__",r=e?Symbol("webpack exports"):"__webpack_exports__",a=e?Symbol("webpack error"):"__webpack_error__",s=e=>{e?.d<1&&(e.d=1,e.forEach(e=>e.r--),e.forEach(e=>e.r--?e.r++:e()))};i.a=(e,i,n)=>{let l;n&&((l=[]).d=-1);const h=new Set,o=e.exports;let u,d,c;const b=new Promise((e,t)=>{c=t,d=e});b[r]=o,b[t]=e=>(l&&e(l),h.forEach(e),b.catch(e=>{})),e.exports=b;i(e=>{let i;u=(e=>e.map(e=>{if(null!==e&&"object"==typeof e){if(e[t])return e;if(e.then){const i=[];i.d=0,e.then(e=>{n[r]=e,s(i)},e=>{n[a]=e,s(i)});const n={};return n[t]=e=>e(i),n}}const i={};return i[t]=e=>{},i[r]=e,i}))(e);const n=()=>u.map(e=>{if(e[a])throw e[a];return e[r]}),o=new Promise(e=>{i=()=>e(n),i.r=0;const r=e=>e!==l&&!h.has(e)&&(h.add(e),e&&!e.d&&(i.r++,e.push(i)));u.map(e=>e[t](r))});return i.r?o:n()},e=>(e?c(b[a]=e):d(o),s(l))),l?.d<0&&(l.d=0)}})(),i.n=e=>{const t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{if(Array.isArray(t))for(var r=0;r<t.length;){var a=t[r++],s=t[r++];i.o(e,a)?0===s&&r++:0===s?Object.defineProperty(e,a,{enumerable:!0,value:t[r++]}):Object.defineProperty(e,a,{enumerable:!0,get:s})}else for(var a in t)i.o(t,a)&&!i.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);i("3dd6551de8f2")})();

package/distr/smart/color/smart.manifest.json

@@ -1,7 +1,7 @@
 {
   "schema_version": 2,
   "id": "smart.color",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "title": "Color",
   "summary": "A colour control: a swatch that opens the platform picker, the colours a product already has as presets, and a way back to an inherited colour. Built as a general part because a colour is set in a theme, in a site look, on a label and on a chart series, not only on a record.",
   "kind": "smart",
@@ -111,6 +111,11 @@
         "type": "string",
         "default": "",
         "description": "What is read in place of a value while nothing is chosen. Unset, it follows the page's language."
+      },
+      "reset-label": {
+        "type": "string",
+        "default": "",
+        "description": "The accessible name of the button that returns to the inherited colour; `clear-label` still names it. Unset, it follows the page's language («Reset to inherited», «Сбросить к наследуемому»)."
       }
     }
   },
@@ -136,6 +141,14 @@
       "returns": {
         "type": "boolean"
       }
+    },
+    "resetToInherited": {
+      "summary": "Returns the field to its inherited value, as the reset button does: fires the cancellable sf-field:reset, then empties the own value and focuses the control. Returns whether it was reset (false without an inherited value, without an own value, while disabled or readonly, or when the event was prevented).",
+      "arguments": [],
+      "returns": {
+        "type": "boolean",
+        "description": "Whether the field was reset."
+      }
     }
   },
   "events": {
@@ -166,6 +179,26 @@
           }
         }
       }
+    },
+    "sf-field:reset": {
+      "summary": "The person pressed the reset back to the inherited value. Fired before the field is emptied and cancellable: preventDefault keeps the value. When it is not prevented the field empties, says so with its ordinary change, shows the inherited value again and takes focus back.",
+      "payload": {
+        "type": "object",
+        "properties": {
+          "value": {
+            "type": "string",
+            "description": "The field's own value before the reset."
+          },
+          "inheritedValue": {
+            "type": "string",
+            "description": "The inherited value it returns to."
+          },
+          "name": {
+            "type": "string",
+            "description": "The form name, empty when the field has none."
+          }
+        }
+      }
     }
   },
   "state": {
@@ -212,7 +245,7 @@
       "Enter",
       "Space"
     ],
-    "focus": "The platform colour input, each swatch and the clear button take focus in order and keep a visible focus ring. Swatches say whether they are the chosen colour by aria-pressed."
+    "focus": "The platform colour input, each swatch and the clear button take focus in order and keep a visible focus ring. Swatches say whether they are the chosen colour by aria-pressed. After a reset back to the inherited value, focus returns to the control; while the value is inherited, the control carries it as aria-description and the visible marker is aria-hidden."
   },
   "presentation": {
     "themes": [
@@ -270,7 +303,7 @@
     "source_artifacts": [
       {
         "path": "src/smart/color/index.js",
-        "sha256": "1f5e0552690ca5b76605a50967ebeaaf8d63c537d44a661ce90cf326372523e1"
+        "sha256": "da7e4dcdb97b8f4cd05fd354ec62105ae2349f80d303e86be4948a8ad5026d35"
       },
       {
         "path": "src/smart/color/rule.js",
@@ -278,11 +311,19 @@
       },
       {
         "path": "src/smart/color/js/templates/default.js",
-        "sha256": "5b17bab9b762b14d594b0f21151d3d287d3c9cf8e1c6704ccfece68cf414e071"
+        "sha256": "f764df01fc867d7d939f4bcd4f22ff3771670b3bfce282c4c4af82a59359be78"
       },
       {
         "path": "src/smart/color/js/templates/default.css",
         "sha256": "e5755625a291f02dc4e75716b5cdecb454954e47219854cc63055f2a0ca3aaec"
+      },
+      {
+        "path": "src/smart/helpers/inherited-value.js",
+        "sha256": "0c8658ab61678cd5f89badea902be244b92ba96240fb802c60438227f8f9faa9"
+      },
+      {
+        "path": "src/smart/helpers/inherited-value.css",
+        "sha256": "2a10b6d5c8e26c7d1541511c99257e9474b16d30c6e8352e96ed9b47f70b6a2a"
       }
     ],
     "generated_runtime": []

package/distr/smart/color/template/default.js

@@ -1,4 +1,5 @@
 import {html, nothing} from 'lit';
+import {renderInheritedSlot} from '../../../helpers/inherited-value';
 import './default.css';
 
 // The control is a swatch that opens the browser's own colour picker, with the
@@ -37,7 +38,11 @@ export function renderColorTemplate(context) {
             <span class="sf-color-text">
                 ${isSet
                         ? html`<code>${context.value}</code>`
-                        : html`<span class="sf-color-inherited">${context.inheritedText}</span>`}
+                        // With an inherited colour the shared slot says «inherited»
+                        // (simai/ui-source#28); without one the words stay here.
+                        : context.hasInheritedValue
+                                ? nothing
+                                : html`<span class="sf-color-inherited">${context.inheritedText}</span>`}
             </span>
 
             ${context.swatchList.length
@@ -58,7 +63,13 @@ export function renderColorTemplate(context) {
                         </span>`
                     : nothing}
 
-            ${context.clearable && isSet
+            ${context.hasInheritedValue
+                    // The marker while the inherited colour applies, the reset
+                    // once a colour is chosen: the same slot every field uses.
+                    ? renderInheritedSlot(context.component, {size, disabled, className: 'sf-color-inherited-slot'})
+                    : nothing}
+
+            ${context.clearable && isSet && !context.hasInheritedValue
                     ? html`
                         <sf-icon-button
                                 appearance="link"

package/distr/smart/composition-overlay/css/composition-overlay.min.css

@@ -1 +1 @@
-@layer sf.components{.sf-composition-overlay{--sf-composition-overlay-color: var(--sf-primary, Highlight);position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:80;z-index:var(--sf-composition-overlay-z-index, var(--sf-z-index-8, 80));pointer-events:none}.sf-composition-overlay-layer,.sf-composition-overlay-insertions{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;pointer-events:none}.sf-composition-overlay-frame{position:fixed;box-sizing:border-box;border:1px dashed var(--sf-composition-overlay-color);border-radius:0.25rem;border-radius:var(--sf-radius-1, 0.25rem);transition:top 0.1s,left 0.1s,width 0.1s,height 0.1s;transition:top var(--sf-duration-fast, 0.1s),left var(--sf-duration-fast, 0.1s),width var(--sf-duration-fast, 0.1s),height var(--sf-duration-fast, 0.1s)}.sf-composition-overlay-frame--selected{border-style:solid;border-width:2px}.sf-composition-overlay[data-sf-overlay-focus] .sf-composition-overlay-frame--selected{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-composition-overlay-color);outline-offset:2px}.sf-composition-overlay-frame[hidden]{display:none}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-composition-overlay-label{left:-1px}@supports not (inset-inline-start: initial){html:not([dir="rtl"]) .sf-composition-overlay-label{left:-1px}}.sf-composition-overlay-label:where(:dir(ltr)){left:-1px}_:-ms-input-placeholder, [dir="rtl"] .sf-composition-overlay-label{right:-1px}@supports not (inset-inline-start: initial){[dir="rtl"] .sf-composition-overlay-label{right:-1px}}.sf-composition-overlay-label:where(:dir(rtl)){right:-1px}.sf-composition-overlay-label{position:absolute;bottom:100%;inset-block-end:100%;inset-inline-start:-1px;max-width:100%;max-inline-size:100%;overflow:hidden;padding:0 0.25rem;padding:0 var(--sf-space-1, 0.25rem);border-radius:0.25rem 0.25rem 0 0;border-radius:var(--sf-radius-1, 0.25rem) var(--sf-radius-1, 0.25rem) 0 0;background:var(--sf-composition-overlay-color);color:HighlightText;color:var(--sf-on-primary, HighlightText);font-size:0.75rem;font-size:var(--sf-text-1--size, 0.75rem);line-height:1.25rem;line-height:var(--sf-text-1--height, 1.25rem);white-space:nowrap;text-overflow:ellipsis}.sf-composition-overlay-toolbar{position:fixed;display:flex;gap:0.25rem;gap:var(--sf-space-1, 0.25rem);padding:0.25rem;padding:var(--sf-space-1, 0.25rem);border-radius:0.25rem;border-radius:var(--sf-radius-1, 0.25rem);background:Canvas;background:var(--sf-elevation-2--surface, Canvas);--sf-on-surface-variant: var(--sf-on-elevation-2--variant);color:CanvasText;color:var(--sf-on-surface, CanvasText);box-shadow:var(--sf-elevation-2--shadow);pointer-events:auto}.sf-composition-overlay-toolbar[hidden]{display:none}.sf-composition-overlay-action,.sf-composition-overlay-insert{font:inherit;cursor:pointer}.sf-composition-overlay-action{padding:0.25rem 0.5rem;padding:var(--sf-space-1, 0.25rem) var(--sf-space-2, 0.5rem);border:1px solid GrayText;border:1px solid var(--sf-outline, GrayText);border-radius:0.25rem;border-radius:var(--sf-radius-1, 0.25rem);background:Canvas;background:var(--sf-surface-1, Canvas);color:CanvasText;color:var(--sf-on-surface, CanvasText)}.sf-composition-overlay-insert{position:fixed;display:grid;align-items:center;justify-items:center;place-items:center;box-sizing:border-box;height:1.5rem;block-size:1.5rem;margin-top:-0.75rem;-webkit-margin-before:-0.75rem;margin-block-start:-0.75rem;padding:0;border:0;background:linear-gradient(var(--sf-composition-overlay-color), var(--sf-composition-overlay-color)) center/100% 1px no-repeat;color:var(--sf-composition-overlay-color);opacity:.6;pointer-events:none}.sf-composition-overlay-insert:hover,.sf-composition-overlay-insert.focus-visible{opacity:1}.sf-composition-overlay-insert:hover,.sf-composition-overlay-insert:focus-visible{opacity:1}.sf-composition-overlay-insert-mark{display:grid;align-items:center;justify-items:center;place-items:center;width:1.5rem;inline-size:1.5rem;height:1.5rem;block-size:1.5rem;border:1px solid var(--sf-composition-overlay-color);border-radius:50%;background:Canvas;background:var(--sf-surface-1, Canvas);line-height:1;pointer-events:auto}.sf-composition-overlay-insert[aria-pressed=true]{background-size:100% 3px;opacity:1}.sf-composition-overlay-insert[aria-pressed=true] .sf-composition-overlay-insert-mark{background:var(--sf-composition-overlay-color);color:HighlightText;color:var(--sf-on-primary, HighlightText)}.sf-composition-overlay-action.focus-visible,.sf-composition-overlay-insert.focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-composition-overlay-color);outline-offset:2px}.sf-composition-overlay-action:focus-visible,.sf-composition-overlay-insert:focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-composition-overlay-color);outline-offset:2px}.sf-composition-overlay-tree,.sf-composition-overlay-live{position:fixed;width:1px;inline-size:1px;height:1px;block-size:1px;overflow:hidden;-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap;pointer-events:auto}@media(prefers-reduced-motion: reduce){.sf-composition-overlay-frame{transition:none}}.sf-composition-overlay-drop{position:fixed;z-index:90;z-index:var(--sf-sortable-ghost-z-index, var(--sf-z-index-9, 90));border-radius:2px;background:Highlight;background:var(--sf-primary, Highlight);pointer-events:none}.sf-composition-overlay-drop[hidden]{display:none}.sf-composition-overlay-frame--selected .sf-composition-overlay-label{cursor:-webkit-grab;cursor:grab;pointer-events:auto;touch-action:none}}
+@layer sf.components{.sf-composition-overlay{--sf-composition-overlay-color: var(--sf-primary, Highlight);position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:80;z-index:var(--sf-composition-overlay-z-index, var(--sf-z-index-8, 80));pointer-events:none}.sf-composition-overlay-layer,.sf-composition-overlay-insertions{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;pointer-events:none}.sf-composition-overlay-frame{position:fixed;box-sizing:border-box;border:1px dashed var(--sf-composition-overlay-color);border-radius:0.25rem;border-radius:var(--sf-radius-1, 0.25rem);transition:top 0.1s,left 0.1s,width 0.1s,height 0.1s;transition:top var(--sf-duration-fast, 0.1s),left var(--sf-duration-fast, 0.1s),width var(--sf-duration-fast, 0.1s),height var(--sf-duration-fast, 0.1s)}.sf-composition-overlay-frame--selected{border-style:solid;border-width:2px}.sf-composition-overlay[data-sf-overlay-focus] .sf-composition-overlay-frame--selected{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-composition-overlay-color);outline-offset:2px}.sf-composition-overlay-frame[hidden]{display:none}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-composition-overlay-label{left:-1px}@supports not (inset-inline-start: initial){html:not([dir="rtl"]) .sf-composition-overlay-label{left:-1px}}.sf-composition-overlay-label:where(:dir(ltr)){left:-1px}_:-ms-input-placeholder, [dir="rtl"] .sf-composition-overlay-label{right:-1px}@supports not (inset-inline-start: initial){[dir="rtl"] .sf-composition-overlay-label{right:-1px}}.sf-composition-overlay-label:where(:dir(rtl)){right:-1px}.sf-composition-overlay-label{position:absolute;bottom:100%;inset-block-end:100%;inset-inline-start:-1px;max-width:100%;max-inline-size:100%;overflow:hidden;padding:0 0.25rem;padding:0 var(--sf-space-1, 0.25rem);border-radius:0.25rem 0.25rem 0 0;border-radius:var(--sf-radius-1, 0.25rem) var(--sf-radius-1, 0.25rem) 0 0;background:var(--sf-composition-overlay-color);color:HighlightText;color:var(--sf-on-primary, HighlightText);font-size:0.75rem;font-size:var(--sf-text-1--size, 0.75rem);line-height:1.25rem;line-height:var(--sf-text-1--height, 1.25rem);white-space:nowrap;text-overflow:ellipsis}.sf-composition-overlay-toolbar{position:fixed;display:flex;gap:0.25rem;gap:var(--sf-space-1, 0.25rem);padding:0.25rem;padding:var(--sf-space-1, 0.25rem);border-radius:0.25rem;border-radius:var(--sf-radius-1, 0.25rem);background:Canvas;background:var(--sf-elevation-2--surface, Canvas);--sf-on-surface-variant: var(--sf-on-elevation-2--variant);color:CanvasText;color:var(--sf-on-surface, CanvasText);box-shadow:var(--sf-elevation-2--shadow);pointer-events:auto}.sf-composition-overlay-toolbar[hidden]{display:none}.sf-composition-overlay-action,.sf-composition-overlay-insert{font:inherit;cursor:pointer}.sf-composition-overlay-action{padding:0.25rem 0.5rem;padding:var(--sf-space-1, 0.25rem) var(--sf-space-2, 0.5rem);border:1px solid GrayText;border:1px solid var(--sf-outline, GrayText);border-radius:0.25rem;border-radius:var(--sf-radius-1, 0.25rem);background:Canvas;background:var(--sf-surface-1, Canvas);color:CanvasText;color:var(--sf-on-surface, CanvasText)}.sf-composition-overlay-insert{position:fixed;display:grid;align-items:center;justify-items:center;place-items:center;box-sizing:border-box;height:1.5rem;block-size:1.5rem;margin-top:-0.75rem;-webkit-margin-before:-0.75rem;margin-block-start:-0.75rem;padding:0;border:0;background:linear-gradient(var(--sf-composition-overlay-color), var(--sf-composition-overlay-color)) center/100% 1px no-repeat;color:var(--sf-composition-overlay-color);opacity:.6;pointer-events:none}.sf-composition-overlay-insert:hover,.sf-composition-overlay-insert.focus-visible{opacity:1}.sf-composition-overlay-insert:hover,.sf-composition-overlay-insert:focus-visible{opacity:1}.sf-composition-overlay-insert-mark{display:grid;align-items:center;justify-items:center;place-items:center;width:1.5rem;inline-size:1.5rem;height:1.5rem;block-size:1.5rem;border:1px solid var(--sf-composition-overlay-color);border-radius:50%;background:Canvas;background:var(--sf-surface-1, Canvas);line-height:1;pointer-events:auto}.sf-composition-overlay-insert[aria-pressed=true]{background-size:100% 3px;opacity:1}.sf-composition-overlay-insert[aria-pressed=true] .sf-composition-overlay-insert-mark{background:var(--sf-composition-overlay-color);color:HighlightText;color:var(--sf-on-primary, HighlightText)}.sf-composition-overlay-action.focus-visible,.sf-composition-overlay-insert.focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-composition-overlay-color);outline-offset:2px}.sf-composition-overlay-action:focus-visible,.sf-composition-overlay-insert:focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-composition-overlay-color);outline-offset:2px}.sf-composition-overlay-tree,.sf-composition-overlay-live{position:fixed;width:1px;inline-size:1px;height:1px;block-size:1px;overflow:hidden;-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap;pointer-events:auto}@media(prefers-reduced-motion: reduce){.sf-composition-overlay-frame{transition:none}}.sf-composition-overlay-drop{position:fixed;z-index:90;z-index:var(--sf-sortable-ghost-z-index, var(--sf-z-index-9, 90));border-radius:2px;background:Highlight;background:var(--sf-primary, Highlight);pointer-events:none}.sf-composition-overlay-drop[hidden]{display:none}.sf-composition-overlay-frame--selected .sf-composition-overlay-label{cursor:-webkit-grab;cursor:grab;pointer-events:auto;touch-action:none}.sf-composition-overlay[data-sf-overlay-mode=frame] .sf-composition-overlay-frame{transition:none}.sf-composition-overlay[data-sf-overlay-mode=frame] .sf-composition-overlay-frame--selected .sf-composition-overlay-label{cursor:default;pointer-events:none}.sf-composition-overlay[data-sf-overlay-editing] .sf-composition-overlay-frame--hover{display:none}}

package/distr/smart/composition-overlay/js/composition-overlay.min.js

@@ -1 +1 @@
-(()=>{"use strict";var e={cae046a8699f(e,t,s){s.a(e,async(e,t)=>{try{var i=s("dd1616d485c7"),n=e([i]);i=(n.then?(await n)():n)[0],globalThis.SF=globalThis.SF||{},globalThis.SF.CompositionOverlay=Object.freeze({OVERLAY_EVENTS:i.V0,checkOverlayActions:i.G_,overlayNodes:i.YD}),(0,i.IX)(),t()}catch(e){t(e)}})},"0d662e4d7d63"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("page-language"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("page-language")),{once:!0}))},"6f489cc65b77"(e,t,s){function i(e){if(!e||"[object Object]"!==Object.prototype.toString.call(e))return!1;const t=Object.getPrototypeOf(e);return t===Object.prototype||null===t}s.d(t,{Qd:()=>i})},dd1616d485c7(e,t,s){s.a(e,async(e,i)=>{try{s.d(t,{G_:()=>p,IX:()=>b,YD:()=>u});var n=s("6f489cc65b77"),o=s("0d662e4d7d63"),r=s("7c1f9c2b36da"),l=e([o,r]);[o,r]=l.then?(await l)():l;const a=Object.freeze({select:"sf-composition-overlay-select",action:"sf-composition-overlay-action",insert:"sf-composition-overlay-insert",move:"sf-composition-overlay-move"}),h={ru:{picked:"Перемещение: {label}. Стрелки выбирают место, Enter — положить, Escape — отменить.",cancelled:"Перемещение отменено.",tree:"Структура страницы",toolbar:"Действия",insert:"Вставить",insertAt:"Вставить в «{slot}», позиция {index}",position:"{index} из {total}",selected:"Выбрано: {label}"},en:{picked:"Moving {label}. Arrows choose a place, Enter drops, Escape cancels.",cancelled:"Move cancelled.",tree:"Page structure",toolbar:"Actions",insert:"Insert",insertAt:"Insert into “{slot}”, position {index}",position:"{index} of {total}",selected:"Selected: {label}"}},d=/^[a-z][a-z0-9-]{0,63}$/u,c=(e,t)=>e.replace(/\{(\w+)\}/gu,(e,s)=>String(t[s]??""));function u(e){const t=[],s=(e,i,o,r,l)=>{if(!(0,n.Qd)(e)||"string"!=typeof e.id)return;const a={id:e.id,type:e.type,parent:i,slot:o,index:r,level:l,slots:{}};t.push(a);for(const[t,i]of Object.entries((0,n.Qd)(e.slots)?e.slots:{}))Array.isArray(i)&&(a.slots[t]=i.map(e=>e?.id).filter(e=>"string"==typeof e),i.forEach((i,n)=>s(i,e.id,t,n,l+1)))};return s(e?.root,null,null,0,1),t}function p(e){if(!Array.isArray(e)||e.length>16)throw new TypeError("Overlay actions must be a list of up to 16 entries");return e.map(e=>{if(!(0,n.Qd)(e)||!d.test(e.id||"")||"string"!=typeof e.label||!e.label.trim()||Object.keys(e).some(e=>"id"!==e&&"label"!==e))throw new TypeError("Overlay actions have an opaque id and a label only");return Object.freeze({id:e.id,label:e.label})})}function b(e=globalThis.customElements){if(!e||"function"!=typeof globalThis.HTMLElement)return null;const t=e.get("sf-composition-overlay");if(t)return t;class s extends globalThis.HTMLElement{constructor(){super(),this.canvas=null,this.nodes=[],this.byId=new Map,this.describe=()=>({}),this.actions=[],this.selectedId=null,this.hoverId=null,this.insertionTarget=null,this.connection=null,this.frameRequest=0,this.resizeObserver=null,this.layer=null,this.dropFilter=()=>!0,this.moving=null,this.unregisterDrop=null,this.dropHint=null}get messages(){return{...Object.fromEntries(Object.keys(h.en).map(e=>[e,(0,o.pageText)(h,e,this,"sf-composition-overlay")])),...this.customMessages||{}}}connectedCallback(){this.layer||this.buildLayer();const e=this.getAttribute("for");if(e&&!this.canvas){const t=globalThis.document.getElementById(e);t&&this.attach(t)}else this.canvas&&this.bind()}disconnectedCallback(){this.unbind()}buildLayer(){const e=globalThis.document;this.classList.add("sf-composition-overlay"),this.layer=e.createElement("div"),this.layer.className="sf-composition-overlay-layer",this.layer.setAttribute("aria-hidden","true"),this.hoverFrame=this.frame("hover"),this.selectedFrame=this.frame("selected"),this.insertionLayer=e.createElement("div"),this.insertionLayer.className="sf-composition-overlay-insertions",this.toolbar=e.createElement("div"),this.toolbar.className="sf-composition-overlay-toolbar",this.toolbar.setAttribute("role","toolbar"),this.toolbar.hidden=!0,this.tree=e.createElement("div"),this.tree.className="sf-composition-overlay-tree",this.tree.setAttribute("role","tree"),this.tree.tabIndex=0,this.live=e.createElement("div"),this.live.className="sf-composition-overlay-live",this.live.setAttribute("aria-live","polite"),this.append(this.tree,this.toolbar,this.insertionLayer,this.layer,this.live),this.layer.append(this.hoverFrame,this.selectedFrame)}frame(e){const t=globalThis.document.createElement("div");t.className=`sf-composition-overlay-frame sf-composition-overlay-frame--${e}`,t.hidden=!0;const s=globalThis.document.createElement("span");return s.className="sf-composition-overlay-label",t.append(s),t}attach(e){if(!(e instanceof globalThis.Element))throw new TypeError("Overlay canvas must be an element");return this.layer||this.buildLayer(),this.unbind(),this.canvas=e,this.isConnected&&this.bind(),this}bind(){if(this.connection||!this.canvas)return;this.connection=new AbortController;const e={signal:this.connection.signal},t={...e,passive:!0};this.canvas.addEventListener("pointermove",e=>this.onPointerMove(e),t),this.canvas.addEventListener("pointerleave",()=>this.setHover(null),t),this.canvas.addEventListener("click",e=>this.onCanvasClick(e),{...e,capture:!0}),this.tree.addEventListener("keydown",e=>this.onTreeKey(e),e),this.tree.addEventListener("focus",()=>{this.setAttribute("data-sf-overlay-focus",""),!this.selectedId&&this.nodes.length&&this.select(this.nodes[0].id)},e),this.tree.addEventListener("blur",()=>this.removeAttribute("data-sf-overlay-focus"),e),this.toolbar.addEventListener("click",e=>this.onToolbarClick(e),e),this.toolbar.addEventListener("keydown",e=>this.onToolbarKey(e),e),this.insertionLayer.addEventListener("click",e=>this.onInsertionClick(e),e),globalThis.addEventListener("scroll",()=>this.schedule(),{...t,capture:!0}),globalThis.addEventListener("resize",()=>this.schedule(),t),"function"==typeof globalThis.ResizeObserver&&(this.resizeObserver=new globalThis.ResizeObserver(()=>this.schedule()),this.resizeObserver.observe(this.canvas)),this.unregisterDrop=(0,r.OE)({resolve:(e,t,s)=>this.accepts(s)?this.resolveDrop(e,t,null):null,keyboardTargets:e=>this.accepts(e)?this.dropTargets(null):[],drop:(e,t)=>this.emit(a.insert,{...t,item:e.item,from:e.from,mode:e.mode}),leave:()=>this.showDropHint(null)}),this.selectedFrame.firstChild.addEventListener("pointerdown",e=>this.onHandleDown(e),e),this.setAttribute("data-sf-overlay","connected"),this.renderTree(),this.schedule()}unbind(){this.pointerDrag?.abort(),this.pointerDrag=null,this.unregisterDrop?.(),this.unregisterDrop=null,this.moving=null,this.connection?.abort(),this.connection=null,this.resizeObserver?.disconnect(),this.resizeObserver=null,this.frameRequest&&globalThis.cancelAnimationFrame(this.frameRequest),this.frameRequest=0,this.canvas&&this.setAttribute("data-sf-overlay","disposed")}setDocument(e,{describe:t}={}){const s=this.selectedId?this.byId.get(this.selectedId):null,i=globalThis.document.activeElement,n=Boolean(i)&&(this.toolbar?.contains(i)||this.insertionLayer?.contains(i));if(this.nodes=u(e),this.byId=new Map(this.nodes.map(e=>[e.id,e])),"function"==typeof t&&(this.describe=t),this.renderTree(),null!==this.selectedId&&!this.byId.has(this.selectedId)){const e=s?.parent&&this.byId.has(s.parent)?s.parent:this.nodes[0]?.id??null;this.select(n?e:null,{focus:n})}return this.schedule(),this}setActions(e){return this.actions=p(e),this.renderToolbar(),this.schedule(),this}setMessages(e){return this.customMessages=(0,n.Qd)(e)?{...e}:null,this.renderTree(),this}setDropFilter(e){return this.dropFilter="function"==typeof e?e:()=>!0,this}accepts(e){const t=(this.getAttribute("accepts")||"").split(/\s+/u).filter(Boolean);return Boolean(e&&t.includes(e.group))}emit(e,t){this.dispatchEvent(new globalThis.CustomEvent(e,{bubbles:!0,composed:!0,detail:Object.freeze(t)}))}dropTargets(e){const t=new Set;if(e){const s=[e];for(;s.length;){const e=s.pop();t.add(e);for(const t of Object.values(this.byId.get(e)?.slots||{}))s.push(...t)}}const s=[];for(const i of this.nodes)if(!t.has(i.id))for(const[t,n]of Object.entries(i.slots)){const o=e?n.filter(t=>t!==e):n;for(let n=0;n<=o.length;n+=1){if(e){const s=this.byId.get(e);if(s.parent===i.id&&s.slot===t&&n===s.index)continue}const l={parent_id:i.id,slot:t,index:n};if(!this.dropFilter(l,e?{node_id:e}:(0,r.Ld)()))continue;const a=this.placeRect(i.id,t,n,o);a&&s.push({descriptor:l,rect:a,label:c(this.messages.insertAt,{slot:t,index:n+1})})}}return s}placeRect(e,t,s,i){const n=this.element(i[s]),o=this.element(i[s-1]),r=this.element(e),l=n||o||r;if(!l)return null;const a=l.getBoundingClientRect(),h=n?a.top:a.bottom;return{left:a.left,top:h-1,width:a.width,height:3}}resolveDrop(e,t,s){if(!this.canvas)return null;const i=globalThis.document.elementsFromPoint(e,t).find(e=>this.canvas.contains(e));let n=i?this.nodeAt(i):null;const o=s?this.dropTargets(s):null,l=e=>s?o.some(t=>JSON.stringify(t.descriptor)===JSON.stringify(e)):this.dropFilter(e,(0,r.Ld)());if(s)for(let e=n;e;e=this.byId.get(e)?.parent)if(e===s)return this.showDropHint(null),null;for(;n;){const e=this.byId.get(n);for(const[t,i]of Object.entries(e.slots)){const n=s?i.filter(e=>e!==s):i,o={parent_id:e.id,slot:t,index:0};if(0===n.length&&l(o)){const s=this.placeRect(e.id,t,0,n);return this.showDropHint(s),{descriptor:o,rect:s,label:c(this.messages.insertAt,{slot:t,index:1})}}}if(!e.parent)break;const i=this.element(n).getBoundingClientRect(),o=this.byId.get(e.parent).slots[e.slot],r=s?o.filter(e=>e!==s):o,a=r.indexOf(n);if(a>=0){const s=t>i.top+i.height/2?a+1:a,n={parent_id:e.parent,slot:e.slot,index:s};if(l(n)){const t=this.placeRect(e.parent,e.slot,s,r);return this.showDropHint(t),{descriptor:n,rect:t,label:c(this.messages.insertAt,{slot:e.slot,index:s+1})}}}n=e.parent}return this.showDropHint(null),null}showDropHint(e){this.dropHint||(this.dropHint=globalThis.document.createElement("div"),this.dropHint.className="sf-composition-overlay-drop",this.layer?.append(this.dropHint)),this.dropHint.hidden=!e,e&&Object.assign(this.dropHint.style,{left:`${e.left}px`,top:`${e.top}px`,width:`${e.width}px`,height:`${e.height}px`})}onHandleDown(e){if(0!==e.button||!this.selectedId||!this.byId.get(this.selectedId)?.parent)return;e.preventDefault();const t=this.selectedId;this.pointerDrag?.abort();const s=new AbortController;this.pointerDrag=s;let i=null;globalThis.addEventListener("keydown",e=>{"Escape"===e.key&&(e.preventDefault(),s.abort(),this.showDropHint(null))},{signal:s.signal,capture:!0}),globalThis.addEventListener("pointermove",e=>{i=this.resolveDrop(e.clientX,e.clientY,t)},{signal:s.signal}),globalThis.addEventListener("pointerup",()=>{s.abort(),this.showDropHint(null),i&&this.emit(a.move,{node_id:t,...i.descriptor})},{signal:s.signal}),globalThis.addEventListener("pointercancel",()=>{s.abort(),this.showDropHint(null)},{signal:s.signal})}startKeyboardMove(){const e=this.byId.get(this.selectedId);if(!e?.parent)return;const t=this.dropTargets(e.id);t.length&&(this.moving={node:e.id,places:t,index:0},this.live.textContent=c(this.messages.picked,{label:this.info(e).label}),this.showKeyboardPlace())}showKeyboardPlace(){const e=this.moving.places[this.moving.index];this.showDropHint(e.rect),this.live.textContent=e.label}onMoveKey(e){const t=this.moving;if("Escape"===e.key||"Tab"===e.key)return"Escape"===e.key&&e.preventDefault(),this.moving=null,this.showDropHint(null),this.live.textContent=this.messages.cancelled,!0;if("Enter"===e.key||" "===e.key){e.preventDefault();const s=t.places[t.index];return this.moving=null,this.showDropHint(null),this.emit(a.move,{node_id:t.node,...s.descriptor}),!0}const s={ArrowDown:1,ArrowRight:1,ArrowUp:-1,ArrowLeft:-1}[e.key];return void 0===s||(e.preventDefault(),t.index=Math.max(0,Math.min(t.places.length-1,t.index+s)),this.showKeyboardPlace()),!0}setInsertionTarget(e){return this.insertionTarget=e&&"string"==typeof e.parent_id&&"string"==typeof e.slot&&Number.isSafeInteger(e.index)?Object.freeze({parent_id:e.parent_id,slot:e.slot,index:e.index}):null,this.schedule(),this}element(e){if(!this.canvas||"string"!=typeof e)return null;for(const t of this.canvas.querySelectorAll("[data-sf-composition-id]"))if(t.getAttribute("data-sf-composition-id")===e)return t;return null}info(e){const t=this.describe(e)||{};return{label:"string"==typeof t.label&&t.label.trim()?t.label:e.id,badges:Array.isArray(t.badges)?t.badges.filter(e=>"string"==typeof e&&e.trim()).slice(0,4):[]}}select(e,{focus:t=!1,emit:s=!0}={}){if(null!==e&&!this.byId.has(e))return this;if(this.selectedId===e)return this;if(this.selectedId=e,this.renderTreeSelection(),this.renderToolbar(),this.schedule(),null!==e){const t=this.byId.get(e),s=this.nodes.filter(e=>e.parent===t.parent&&e.slot===t.slot),{label:i}=this.info(t);this.live.textContent=`${c(this.messages.selected,{label:i})}, ${c(this.messages.position,{index:s.indexOf(t)+1,total:s.length})}`}return t&&this.tree.focus(),s&&this.dispatchEvent(new globalThis.CustomEvent(a.select,{bubbles:!0,composed:!0,detail:Object.freeze({node_id:e})})),this}setHover(e){this.hoverId!==e&&(this.hoverId=e,this.schedule())}nodeAt(e){let t=e instanceof globalThis.Element?e.closest("[data-sf-composition-id]"):null;for(;t&&this.canvas.contains(t);){const e=t.getAttribute("data-sf-composition-id");if(this.byId.has(e))return e;t=t.parentElement?.closest("[data-sf-composition-id]")||null}return null}onPointerMove(e){this.setHover(this.nodeAt(e.target))}onCanvasClick(e){const t=this.nodeAt(e.target);t&&(e.preventDefault(),e.stopPropagation(),this.select(t))}onTreeKey(e){if(this.moving&&this.onMoveKey(e))return;if(" "===e.key&&this.selectedId)return e.preventDefault(),void this.startKeyboardMove();const t=this.nodes.findIndex(e=>e.id===this.selectedId),s=this.nodes[t];let i=null;if("ArrowDown"===e.key)i=this.nodes[Math.min(this.nodes.length-1,t+1)];else if("ArrowUp"===e.key)i=this.nodes[Math.max(0,t-1)];else if("Home"===e.key)i=this.nodes[0];else if("End"===e.key)i=this.nodes.at(-1);else if("ArrowLeft"===e.key&&s?.parent)i=this.byId.get(s.parent);else{if("ArrowRight"!==e.key||!s)return"Escape"===e.key&&null!==this.selectedId?(e.preventDefault(),void this.select(null)):"Enter"===e.key&&this.toolbar.querySelector("button")?(e.preventDefault(),void this.toolbar.querySelector("button").focus()):void 0;i=this.nodes.find(e=>e.parent===s.id)||null}e.preventDefault(),i&&this.select(i.id)}onToolbarKey(e){const t=[...this.toolbar.querySelectorAll("button")],s=t.indexOf(globalThis.document.activeElement);if("Escape"===e.key)e.preventDefault(),this.tree.focus();else if("ArrowRight"===e.key||"ArrowLeft"===e.key){e.preventDefault();const i="ArrowRight"===e.key==("rtl"!==globalThis.getComputedStyle(this).direction)?1:-1;t[(s+i+t.length)%t.length]?.focus()}}onToolbarClick(e){const t=e.target instanceof globalThis.Element?e.target.closest("button[data-action]"):null;t&&this.selectedId&&this.dispatchEvent(new globalThis.CustomEvent(a.action,{bubbles:!0,composed:!0,detail:Object.freeze({action_id:t.dataset.action,node_id:this.selectedId})}))}onInsertionClick(e){const t=e.target instanceof globalThis.Element?e.target.closest("button[data-parent]"):null;if(!t)return;const s={parent_id:t.dataset.parent,slot:t.dataset.slot,index:Number(t.dataset.index)};this.setInsertionTarget(s),this.positionInsertions(),this.dispatchEvent(new globalThis.CustomEvent(a.insert,{bubbles:!0,composed:!0,detail:Object.freeze({...s})}))}renderTree(){this.tree&&(this.tree.setAttribute("aria-label",this.getAttribute("label")||this.messages.tree),this.tree.replaceChildren(...this.nodes.map(e=>{const t=globalThis.document.createElement("div"),s=this.nodes.filter(t=>t.parent===e.parent&&t.slot===e.slot),{label:i,badges:n}=this.info(e);return t.id=`${this.id||"sf-overlay"}-item-${e.id}`.replace(/[^A-Za-z0-9_-]/gu,"-"),t.setAttribute("role","treeitem"),t.setAttribute("aria-level",String(e.level)),t.setAttribute("aria-setsize",String(s.length)),t.setAttribute("aria-posinset",String(s.indexOf(e)+1)),t.setAttribute("aria-label",n.length?`${i} (${n.join(", ")})`:i),t.dataset.nodeId=e.id,t})),this.renderTreeSelection())}renderTreeSelection(){let e=null;for(const t of this.tree?.children||[]){const s=t.dataset.nodeId===this.selectedId;t.setAttribute("aria-selected",s?"true":"false"),s&&(e=t.id)}e?this.tree.setAttribute("aria-activedescendant",e):this.tree?.removeAttribute("aria-activedescendant")}renderToolbar(){this.toolbar&&(this.toolbar.setAttribute("aria-label",this.messages.toolbar),this.toolbar.replaceChildren(...this.actions.map(e=>{const t=globalThis.document.createElement("button");return t.type="button",t.className="sf-composition-overlay-action",t.dataset.action=e.id,t.textContent=e.label,t})),this.toolbar.hidden=!this.selectedId||0===this.actions.length)}schedule(){!this.frameRequest&&this.connection&&(this.frameRequest=globalThis.requestAnimationFrame(()=>{this.frameRequest=0,this.position()}))}place(e,t){const s=t?this.element(t):null;if(!s)return e.hidden=!0,null;const i=s.getBoundingClientRect();e.hidden=!1,e.style.insetInlineStart="",Object.assign(e.style,{left:`${i.left}px`,top:`${i.top}px`,width:`${i.width}px`,height:`${i.height}px`});const{label:n,badges:o}=this.info(this.byId.get(t));return e.firstChild.textContent=o.length?`${n} · ${o.join(" · ")}`:n,i}position(){if(!this.canvas)return;this.place(this.hoverFrame,this.hoverId&&this.hoverId!==this.selectedId?this.hoverId:null);const e=this.place(this.selectedFrame,this.selectedId);if(e?this.toolbar.hidden=0===this.actions.length:this.toolbar.contains(globalThis.document.activeElement)||(this.toolbar.hidden=!0),e&&!this.toolbar.hidden){const t=this.toolbar.getBoundingClientRect(),s=e.top-t.height-4,i=s>=0?s:Math.min(globalThis.innerHeight-t.height,e.bottom+4),n="rtl"===globalThis.getComputedStyle(this).direction?e.right-t.width:e.left,o=Math.max(0,Math.min(n,globalThis.innerWidth-t.width));Object.assign(this.toolbar.style,{top:`${i}px`,left:`${o}px`})}this.positionInsertions()}positionInsertions(){const e=this.selectedId?this.byId.get(this.selectedId):null,t=[];if(e?.parent){const s=this.byId.get(e.parent),i=s.slots[e.slot]||[];for(let n=0;n<=i.length;n+=1)t.push({parent:s.id,slot:e.slot,index:n,before:i[n],after:i[n-1]})}if(e)for(const[s,i]of Object.entries(e.slots))t.push({parent:e.id,slot:s,index:i.length,after:i.at(-1),end:!0});const s=this.insertionTarget,i=new Map([...this.insertionLayer.children].map(e=>[e.dataset.key,e])),n=new Set;for(const e of t){const t=this.element(e.before)||this.element(e.after)||this.element(e.parent);if(!t)continue;const o=`${e.parent}|${e.slot}|${e.index}`;n.add(o);let r=i.get(o);if(!r){r=globalThis.document.createElement("button"),r.type="button",r.className="sf-composition-overlay-insert",r.dataset.key=o,r.dataset.parent=e.parent,r.dataset.slot=e.slot,r.dataset.index=String(e.index);const t=globalThis.document.createElement("span");t.className="sf-composition-overlay-insert-mark",t.setAttribute("aria-hidden","true"),t.textContent="+",r.append(t),this.insertionLayer.append(r)}const l=t.getBoundingClientRect(),a=e.before&&!e.end?l.top:l.bottom,h=Boolean(s&&s.parent_id===e.parent&&s.slot===e.slot&&s.index===e.index);r.setAttribute("aria-pressed",h?"true":"false"),r.setAttribute("aria-label",c(this.messages.insertAt,{slot:e.slot,index:e.index+1})),Object.assign(r.style,{left:`${l.left}px`,top:`${a}px`,width:`${l.width}px`})}for(const[e,t]of i)n.has(e)||t.remove()}}return e.define("sf-composition-overlay",s),s}s.d(t,["V0",0,a]),i()}catch(f){i(f)}})},"7c1f9c2b36da"(e,t,s){s.a(e,async(e,i)=>{try{s.d(t,{Ld:()=>a,OE:()=>h});var n=s("0d662e4d7d63"),o=e([n]);n=(o.then?(await o)():o)[0];const r=globalThis.__sfSortableSharedV1||(globalThis.__sfSortableSharedV1={targets:new Set,session:null}),l=r.targets;function a(){return r.session?Object.freeze({item:r.session.item,from:r.session.from,group:r.session.group,mode:r.session.mode,input:r.session.input}):null}function h(e){if(!e||"function"!=typeof e.resolve||"function"!=typeof e.drop)throw new TypeError("Drop target needs resolve and drop");return l.add(e),()=>l.delete(e)}i()}catch(d){i(d)}})}};const t={};function s(i){const n=t[i];if(void 0!==n)return n.exports;const o=t[i]={exports:{}};return e[i](o,o.exports,s),o.exports}(()=>{const e="function"==typeof Symbol,t=e?Symbol("webpack queues"):"__webpack_queues__",i=e?Symbol("webpack exports"):"__webpack_exports__",n=e?Symbol("webpack error"):"__webpack_error__",o=e=>{e?.d<1&&(e.d=1,e.forEach(e=>e.r--),e.forEach(e=>e.r--?e.r++:e()))};s.a=(e,s,r)=>{let l;r&&((l=[]).d=-1);const a=new Set,h=e.exports;let d,c,u;const p=new Promise((e,t)=>{u=t,c=e});p[i]=h,p[t]=e=>(l&&e(l),a.forEach(e),p.catch(e=>{})),e.exports=p;s(e=>{let s;d=(e=>e.map(e=>{if(null!==e&&"object"==typeof e){if(e[t])return e;if(e.then){const s=[];s.d=0,e.then(e=>{r[i]=e,o(s)},e=>{r[n]=e,o(s)});const r={};return r[t]=e=>e(s),r}}const s={};return s[t]=e=>{},s[i]=e,s}))(e);const r=()=>d.map(e=>{if(e[n])throw e[n];return e[i]}),h=new Promise(e=>{s=()=>e(r),s.r=0;const i=e=>e!==l&&!a.has(e)&&(a.add(e),e&&!e.d&&(s.r++,e.push(s)));d.map(e=>e[t](i))});return s.r?h:r()},e=>(e?u(p[n]=e):c(h),o(l))),l?.d<0&&(l.d=0)}})(),s.d=(e,t)=>{if(Array.isArray(t))for(var i=0;i<t.length;){var n=t[i++],o=t[i++];s.o(e,n)?0===o&&i++:0===o?Object.defineProperty(e,n,{enumerable:!0,value:t[i++]}):Object.defineProperty(e,n,{enumerable:!0,get:o})}else for(var n in t)s.o(t,n)&&!s.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);s("cae046a8699f")})();
+(()=>{"use strict";var e={"421676f72963"(e,t,i){i.d(t,{Ec:()=>l,Hw:()=>a});const s="sfPopoverOpen",n=new WeakSet,o=Symbol.for("sf.openSurfaceLayers");function r(){const e=globalThis;return Array.isArray(e[o])||(e[o]=[]),e[o]}function l(e,t){if(!e)return;const i=Boolean(t);if(i===n.has(e))return;const o=r();if(i)n.add(e),o.push(e);else{n.delete(e);const t=o.lastIndexOf(e);t>=0&&o.splice(t,1)}!function(e){const t=globalThis.document?.documentElement;if(!t)return;const i=Math.max(0,Number(t.dataset[s]||0)+e);i?t.dataset[s]=String(i):delete t.dataset[s]}(i?1:-1)}function a(e){const t=r();for(let i=t.length-1;i>=0;i-=1){const s=t[i];if(!1!==s?.isConnected)return s===e}return!0}},cae046a8699f(e,t,i){i.a(e,async(e,t)=>{try{var s=i("dd1616d485c7"),n=e([s]);s=(n.then?(await n)():n)[0],globalThis.SF=globalThis.SF||{},globalThis.SF.CompositionOverlay=Object.freeze({OVERLAY_EVENTS:s.V0,checkOverlayActions:s.G_,checkOverlayNodes:s._l,overlayNodes:s.YD}),(0,s.IX)(),t()}catch(e){t(e)}})},"0d662e4d7d63"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("page-language"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("page-language")),{once:!0}))},"6f489cc65b77"(e,t,i){function s(e){if(!e||"[object Object]"!==Object.prototype.toString.call(e))return!1;const t=Object.getPrototypeOf(e);return t===Object.prototype||null===t}i.d(t,{Qd:()=>s})},dd1616d485c7(e,t,i){i.a(e,async(e,s)=>{try{i.d(t,{G_:()=>p,IX:()=>O,YD:()=>f,_l:()=>v});var n=i("6f489cc65b77"),o=i("0d662e4d7d63"),r=i("7c1f9c2b36da"),l=i("421676f72963"),a=e([o,r]);[o,r]=a.then?(await a)():a;const h=Object.freeze({select:"sf-composition-overlay-select",action:"sf-composition-overlay-action",insert:"sf-composition-overlay-insert",move:"sf-composition-overlay-move",edit:"sf-composition-overlay-edit"}),d={ru:{picked:"Перемещение: {label}. Стрелки выбирают место, Enter — положить, Escape — отменить.",cancelled:"Перемещение отменено.",tree:"Структура страницы",toolbar:"Действия",insert:"Вставить",insertAt:"Вставить в «{slot}», позиция {index}",position:"{index} из {total}",selected:"Выбрано: {label}",editing:"Редактирование: {label}. Enter — сохранить, Escape — отменить."},en:{picked:"Moving {label}. Arrows choose a place, Enter drops, Escape cancels.",cancelled:"Move cancelled.",tree:"Page structure",toolbar:"Actions",insert:"Insert",insertAt:"Insert into “{slot}”, position {index}",position:"{index} of {total}",selected:"Selected: {label}",editing:"Editing {label}. Enter saves, Escape cancels."}},c=/^[a-z][a-z0-9-]{0,63}$/u,u=(e,t)=>e.replace(/\{(\w+)\}/gu,(e,i)=>String(t[i]??""));function f(e){const t=[],i=(e,s,o,r,l)=>{if(!(0,n.Qd)(e)||"string"!=typeof e.id)return;const a={id:e.id,type:e.type,parent:s,slot:o,index:r,level:l,slots:{}};t.push(a);for(const[t,s]of Object.entries((0,n.Qd)(e.slots)?e.slots:{}))Array.isArray(s)&&(a.slots[t]=s.map(e=>e?.id).filter(e=>"string"==typeof e),s.forEach((s,n)=>i(s,e.id,t,n,l+1)))};return i(e?.root,null,null,0,1),t}function p(e){if(!Array.isArray(e)||e.length>16)throw new TypeError("Overlay actions must be a list of up to 16 entries");return e.map(e=>{if(!(0,n.Qd)(e)||!c.test(e.id||"")||"string"!=typeof e.label||!e.label.trim()||Object.keys(e).some(e=>"id"!==e&&"label"!==e))throw new TypeError("Overlay actions have an opaque id and a label only");return Object.freeze({id:e.id,label:e.label})})}const b=new Set(["id","kind","rect","element","label","parent","editable"]),m=e=>"number"==typeof e&&Number.isFinite(e),g=e=>Boolean(e)&&"object"==typeof e&&1===e.nodeType&&"function"==typeof e.getBoundingClientRect;function v(e){if(!Array.isArray(e))throw new TypeError("Overlay nodes must be a list");const t=new Set,i=e.map(e=>{if(!(0,n.Qd)(e)||Object.keys(e).some(e=>!b.has(e)))throw new TypeError("Overlay nodes have id, kind, rect or element, label, parent and editable only");if("string"!=typeof e.id||!e.id||t.has(e.id))throw new TypeError("Overlay nodes have unique non-empty string ids");if("string"!=typeof e.kind||!e.kind)throw new TypeError(`Overlay node ${e.id} names its kind`);const{rect:i,element:s}=e;if(void 0!==i&&(!(0,n.Qd)(i)||!["x","y","width","height"].every(e=>m(i[e]))||i.width<0||i.height<0))throw new TypeError(`Overlay node ${e.id} has a rect {x, y, width, height} of finite numbers`);if(void 0!==s&&!g(s))throw new TypeError(`Overlay node ${e.id} has an element`);if(void 0===i&&void 0===s)throw new TypeError(`Overlay node ${e.id} has a rect or an element`);if(void 0!==e.label&&"string"!=typeof e.label)throw new TypeError(`Overlay node ${e.id} has a string label`);if(void 0!==e.parent&&null!==e.parent&&("string"!=typeof e.parent||e.parent===e.id))throw new TypeError(`Overlay node ${e.id} names another node as its parent`);if(void 0!==e.editable&&"boolean"!=typeof e.editable)throw new TypeError(`Overlay node ${e.id} has a boolean editable`);if(e.editable&&void 0===s)throw new TypeError(`Overlay node ${e.id} is editable only with an element`);return t.add(e.id),Object.freeze({id:e.id,kind:e.kind,rect:void 0===i?null:Object.freeze({x:i.x,y:i.y,width:i.width,height:i.height}),element:s??null,label:e.label??null,parent:e.parent??null,editable:!0===e.editable})}),s=new Map(i.map(e=>[e.id,e]));for(const e of i){const t=new Set([e.id]);for(let i=e.parent;null!==i;i=s.get(i).parent){if(!s.has(i))throw new TypeError(`Overlay node ${e.id} names a parent that is not in the list`);if(t.has(i))throw new TypeError(`Overlay node ${e.id} is its own ancestor`);t.add(i)}}return Object.freeze(i)}function y(e){const t=e.map(e=>({id:e.id,type:e.kind,kind:e.kind,label:e.label,parent:e.parent,slot:"default",index:0,level:1,slots:{},flat:e})),i=new Map(t.map(e=>[e.id,e])),s=new Map;for(const e of t){const t=e.parent??"";e.index=s.get(t)||0,s.set(t,e.index+1),e.parent&&(i.get(e.parent).slots.default||=[]).push(e.id);for(let t=e.parent;t;t=i.get(t).parent)e.level+=1}return t}function w({rect:e,layout:t=null,border:i,padding:s,inner:n,scroll:o={x:0,y:0}}){const r=t?.width>0?t.width:i.left+s.left+n.width+s.right+i.right,l=t?.height>0?t.height:i.top+s.top+n.height+s.bottom+i.bottom,a=r>0&&e.width>0?e.width/r:1,h=l>0&&e.height>0?e.height/l:1;return{left:e.left+(i.left+s.left)*a,top:e.top+(i.top+s.top)*h,width:n.width*a,height:n.height*h,scaleX:a,scaleY:h,scrollX:o.x,scrollY:o.y}}function E(e,t){const i=t.left+e.x*t.scaleX,s=t.top+e.y*t.scaleY,n=e.width*t.scaleX,o=e.height*t.scaleY;return{x:i,y:s,left:i,top:s,width:n,height:o,right:i+n,bottom:s+o}}const x=e=>(e.textContent||"").replace(/\s+/gu," ").trim(),T=e=>Number.parseFloat(e)||0,A=(e,t)=>({left:Math.max(e.left,t.left),top:Math.max(e.top,t.top),right:Math.min(e.right,t.right),bottom:Math.min(e.bottom,t.bottom)});function O(e=globalThis.customElements){if(!e||"function"!=typeof globalThis.HTMLElement)return null;const t=e.get("sf-composition-overlay");if(t)return t;class i extends globalThis.HTMLElement{constructor(){super(),this.canvas=null,this.nodes=[],this.byId=new Map,this.describe=()=>({}),this.actions=[],this.selectedId=null,this.hoverId=null,this.insertionTarget=null,this.connection=null,this.frameRequest=0,this.resizeObserver=null,this.layer=null,this.dropFilter=()=>!0,this.moving=null,this.unregisterDrop=null,this.dropHint=null,this.iframe=null,this.frameDoc=null,this.frameConnection=null,this.view=null,this.elementIds=new Map,this.rectNodes=[],this.editing=null}get messages(){return{...Object.fromEntries(Object.keys(d.en).map(e=>[e,(0,o.pageText)(d,e,this,"sf-composition-overlay")])),...this.customMessages||{}}}connectedCallback(){this.layer||this.buildLayer();const e=this.getAttribute("for"),t=this.getAttribute("frame");if(!t||this.canvas||this.iframe)if(!e||this.canvas||this.iframe)(this.canvas||this.iframe)&&this.bind();else{const t=globalThis.document.getElementById(e);t&&this.attach(t)}else{const e=globalThis.document.getElementById(t);e&&this.attachFrame(e)}}disconnectedCallback(){this.unbind()}buildLayer(){const e=globalThis.document;this.classList.add("sf-composition-overlay"),this.layer=e.createElement("div"),this.layer.className="sf-composition-overlay-layer",this.layer.setAttribute("aria-hidden","true"),this.hoverFrame=this.frame("hover"),this.selectedFrame=this.frame("selected"),this.insertionLayer=e.createElement("div"),this.insertionLayer.className="sf-composition-overlay-insertions",this.toolbar=e.createElement("div"),this.toolbar.className="sf-composition-overlay-toolbar",this.toolbar.setAttribute("role","toolbar"),this.toolbar.hidden=!0,this.tree=e.createElement("div"),this.tree.className="sf-composition-overlay-tree",this.tree.setAttribute("role","tree"),this.tree.tabIndex=0,this.live=e.createElement("div"),this.live.className="sf-composition-overlay-live",this.live.setAttribute("aria-live","polite"),this.append(this.tree,this.toolbar,this.insertionLayer,this.layer,this.live),this.layer.append(this.hoverFrame,this.selectedFrame)}frame(e){const t=globalThis.document.createElement("div");t.className=`sf-composition-overlay-frame sf-composition-overlay-frame--${e}`,t.hidden=!0;const i=globalThis.document.createElement("span");return i.className="sf-composition-overlay-label",t.append(i),t}attach(e){if(!(e instanceof globalThis.Element))throw new TypeError("Overlay canvas must be an element");return this.layer||this.buildLayer(),this.unbind(),this.canvas=e,this.iframe=null,this.removeAttribute("data-sf-overlay-mode"),this.layer.style.clipPath="",this.insertionLayer.style.clipPath="",this.isConnected&&this.bind(),this}attachFrame(e){if(!g(e)||"iframe"!==e.localName)throw new TypeError("Overlay frame must be an iframe element");return this.layer||this.buildLayer(),this.unbind(),this.canvas=null,this.iframe=e,this.setAttribute("data-sf-overlay-mode","frame"),this.isConnected&&this.bind(),this}bind(){if(this.connection||!this.canvas&&!this.iframe)return;this.connection=new AbortController;const e={signal:this.connection.signal},t={...e,passive:!0};this.iframe?(this.iframe.addEventListener("load",()=>this.bindFrameDocument(),e),this.iframe.addEventListener("pointerleave",()=>this.setHover(null),t)):(this.canvas.addEventListener("pointermove",e=>this.onPointerMove(e),t),this.canvas.addEventListener("pointerleave",()=>this.setHover(null),t),this.canvas.addEventListener("click",e=>this.onCanvasClick(e),{...e,capture:!0})),this.tree.addEventListener("keydown",e=>this.onTreeKey(e),e),this.tree.addEventListener("focus",()=>{this.setAttribute("data-sf-overlay-focus",""),!this.selectedId&&this.nodes.length&&this.select(this.nodes[0].id)},e),this.tree.addEventListener("blur",()=>this.removeAttribute("data-sf-overlay-focus"),e),this.toolbar.addEventListener("click",e=>this.onToolbarClick(e),e),this.toolbar.addEventListener("keydown",e=>this.onToolbarKey(e),e),this.insertionLayer.addEventListener("click",e=>this.onInsertionClick(e),e),globalThis.addEventListener("scroll",()=>this.schedule(),{...t,capture:!0}),globalThis.addEventListener("resize",()=>this.schedule(),t),"function"==typeof globalThis.ResizeObserver&&(this.resizeObserver=new globalThis.ResizeObserver(()=>this.schedule()),this.resizeObserver.observe(this.canvas||this.iframe)),this.unregisterDrop=(0,r.OE)({resolve:(e,t,i)=>this.accepts(i)?this.resolveDrop(e,t,null):null,keyboardTargets:e=>this.accepts(e)?this.dropTargets(null):[],drop:(e,t)=>this.emit(h.insert,{...t,item:e.item,from:e.from,mode:e.mode}),leave:()=>this.showDropHint(null)}),this.selectedFrame.firstChild.addEventListener("pointerdown",e=>this.onHandleDown(e),e),this.setAttribute("data-sf-overlay","connected"),this.renderTree(),this.iframe&&this.bindFrameDocument(),this.schedule()}bindFrameDocument(){this.editing&&this.finishEdit(!1),this.frameConnection?.abort(),this.frameConnection=null;let e=null;try{e=this.iframe.contentDocument}catch{e=null}const t=e?.defaultView||null;if(this.frameDoc=t?e:null,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver.observe(this.iframe)),!this.frameDoc)return this.setAttribute("data-sf-overlay-frame","unreachable"),void this.schedule();this.removeAttribute("data-sf-overlay-frame"),this.frameConnection=new AbortController;const i={signal:this.frameConnection.signal},s={...i,passive:!0};e.addEventListener("pointermove",e=>this.setHover(this.frameNodeAt(e)),s),e.addEventListener("pointerout",e=>{e.relatedTarget||this.setHover(null)},s),e.addEventListener("click",e=>this.onFrameClick(e),{...i,capture:!0}),e.addEventListener("dblclick",e=>this.onFrameDoubleClick(e),{...i,capture:!0}),e.addEventListener("keydown",e=>this.onFrameKey(e),{...i,capture:!0}),t.addEventListener("scroll",()=>this.schedule(),{...s,capture:!0}),t.addEventListener("resize",()=>this.schedule(),s),this.resizeObserver&&(e.documentElement&&this.resizeObserver.observe(e.documentElement),e.body&&this.resizeObserver.observe(e.body)),this.schedule()}unbind(){this.finishEdit(!1),this.frameConnection?.abort(),this.frameConnection=null,this.frameDoc=null,this.pointerDrag?.abort(),this.pointerDrag=null,this.unregisterDrop?.(),this.unregisterDrop=null,this.moving=null,this.connection?.abort(),this.connection=null,this.resizeObserver?.disconnect(),this.resizeObserver=null,this.frameRequest&&globalThis.cancelAnimationFrame(this.frameRequest),this.frameRequest=0,(this.canvas||this.iframe)&&this.setAttribute("data-sf-overlay","disposed")}setDocument(e,{describe:t}={}){return this.elementIds=new Map,this.rectNodes=[],this.replaceNodes(f(e),t),this}setNodes(e,{describe:t}={}){const i=v(e);this.elementIds=new Map(i.filter(e=>e.element).map(e=>[e.element,e.id]));const s=y(i);if(this.rectNodes=s.filter(e=>e.flat.rect&&!e.flat.element),this.editing){const e=i.find(e=>e.id===this.editing.id);e&&e.element===this.editing.element&&e.editable||this.finishEdit(!1)}return this.replaceNodes(s,"function"==typeof t?t:e=>({label:e.label||e.kind})),this}replaceNodes(e,t){const i=this.selectedId?this.byId.get(this.selectedId):null,s=globalThis.document.activeElement,n=Boolean(s)&&(this.toolbar?.contains(s)||this.insertionLayer?.contains(s));if(this.nodes=e,this.byId=new Map(this.nodes.map(e=>[e.id,e])),"function"==typeof t&&(this.describe=t),this.renderTree(),null!==this.selectedId&&!this.byId.has(this.selectedId)){const e=i?.parent&&this.byId.has(i.parent)?i.parent:this.nodes[0]?.id??null;this.select(n?e:null,{focus:n})}this.schedule()}refresh(){return this.schedule(),this}setActions(e){return this.actions=p(e),this.renderToolbar(),this.schedule(),this}setMessages(e){return this.customMessages=(0,n.Qd)(e)?{...e}:null,this.renderTree(),this}setDropFilter(e){return this.dropFilter="function"==typeof e?e:()=>!0,this}accepts(e){const t=(this.getAttribute("accepts")||"").split(/\s+/u).filter(Boolean);return Boolean(e&&t.includes(e.group))}emit(e,t){this.dispatchEvent(new globalThis.CustomEvent(e,{bubbles:!0,composed:!0,detail:Object.freeze(t)}))}dropTargets(e){const t=new Set;if(e){const i=[e];for(;i.length;){const e=i.pop();t.add(e);for(const t of Object.values(this.byId.get(e)?.slots||{}))i.push(...t)}}const i=[];for(const s of this.nodes)if(!t.has(s.id))for(const[t,n]of Object.entries(s.slots)){const o=e?n.filter(t=>t!==e):n;for(let n=0;n<=o.length;n+=1){if(e){const i=this.byId.get(e);if(i.parent===s.id&&i.slot===t&&n===i.index)continue}const l={parent_id:s.id,slot:t,index:n};if(!this.dropFilter(l,e?{node_id:e}:(0,r.Ld)()))continue;const a=this.placeRect(s.id,t,n,o);a&&i.push({descriptor:l,rect:a,label:u(this.messages.insertAt,{slot:t,index:n+1})})}}return i}placeRect(e,t,i,s){const n=this.element(s[i]),o=this.element(s[i-1]),r=this.element(e),l=n||o||r;if(!l)return null;const a=l.getBoundingClientRect(),h=n?a.top:a.bottom;return{left:a.left,top:h-1,width:a.width,height:3}}resolveDrop(e,t,i){if(!this.canvas)return null;const s=globalThis.document.elementsFromPoint(e,t).find(e=>this.canvas.contains(e));let n=s?this.nodeAt(s):null;const o=i?this.dropTargets(i):null,l=e=>i?o.some(t=>JSON.stringify(t.descriptor)===JSON.stringify(e)):this.dropFilter(e,(0,r.Ld)());if(i)for(let e=n;e;e=this.byId.get(e)?.parent)if(e===i)return this.showDropHint(null),null;for(;n;){const e=this.byId.get(n);for(const[t,s]of Object.entries(e.slots)){const n=i?s.filter(e=>e!==i):s,o={parent_id:e.id,slot:t,index:0};if(0===n.length&&l(o)){const i=this.placeRect(e.id,t,0,n);return this.showDropHint(i),{descriptor:o,rect:i,label:u(this.messages.insertAt,{slot:t,index:1})}}}if(!e.parent)break;const s=this.element(n).getBoundingClientRect(),o=this.byId.get(e.parent).slots[e.slot],r=i?o.filter(e=>e!==i):o,a=r.indexOf(n);if(a>=0){const i=t>s.top+s.height/2?a+1:a,n={parent_id:e.parent,slot:e.slot,index:i};if(l(n)){const t=this.placeRect(e.parent,e.slot,i,r);return this.showDropHint(t),{descriptor:n,rect:t,label:u(this.messages.insertAt,{slot:e.slot,index:i+1})}}}n=e.parent}return this.showDropHint(null),null}showDropHint(e){this.dropHint||(this.dropHint=globalThis.document.createElement("div"),this.dropHint.className="sf-composition-overlay-drop",this.layer?.append(this.dropHint)),this.dropHint.hidden=!e,e&&Object.assign(this.dropHint.style,{left:`${e.left}px`,top:`${e.top}px`,width:`${e.width}px`,height:`${e.height}px`})}onHandleDown(e){if(this.iframe)return;if(0!==e.button||!this.selectedId||!this.byId.get(this.selectedId)?.parent)return;e.preventDefault();const t=this.selectedId;this.pointerDrag?.abort();const i=new AbortController;this.pointerDrag=i;let s=null;globalThis.addEventListener("keydown",e=>{"Escape"===e.key&&(e.preventDefault(),i.abort(),this.showDropHint(null))},{signal:i.signal,capture:!0}),globalThis.addEventListener("pointermove",e=>{s=this.resolveDrop(e.clientX,e.clientY,t)},{signal:i.signal}),globalThis.addEventListener("pointerup",()=>{i.abort(),this.showDropHint(null),s&&this.emit(h.move,{node_id:t,...s.descriptor})},{signal:i.signal}),globalThis.addEventListener("pointercancel",()=>{i.abort(),this.showDropHint(null)},{signal:i.signal})}startKeyboardMove(){const e=this.byId.get(this.selectedId);if(!e?.parent)return;const t=this.dropTargets(e.id);t.length&&(this.moving={node:e.id,places:t,index:0},this.live.textContent=u(this.messages.picked,{label:this.info(e).label}),this.showKeyboardPlace())}showKeyboardPlace(){const e=this.moving.places[this.moving.index];this.showDropHint(e.rect),this.live.textContent=e.label}onMoveKey(e){const t=this.moving;if("Escape"===e.key||"Tab"===e.key)return"Escape"===e.key&&e.preventDefault(),this.moving=null,this.showDropHint(null),this.live.textContent=this.messages.cancelled,!0;if("Enter"===e.key||" "===e.key){e.preventDefault();const i=t.places[t.index];return this.moving=null,this.showDropHint(null),this.emit(h.move,{node_id:t.node,...i.descriptor}),!0}const i={ArrowDown:1,ArrowRight:1,ArrowUp:-1,ArrowLeft:-1}[e.key];return void 0===i||(e.preventDefault(),t.index=Math.max(0,Math.min(t.places.length-1,t.index+i)),this.showKeyboardPlace()),!0}setInsertionTarget(e){return this.insertionTarget=e&&"string"==typeof e.parent_id&&"string"==typeof e.slot&&Number.isSafeInteger(e.index)?Object.freeze({parent_id:e.parent_id,slot:e.slot,index:e.index}):null,this.schedule(),this}element(e){if(!this.canvas||"string"!=typeof e)return null;for(const t of this.canvas.querySelectorAll("[data-sf-composition-id]"))if(t.getAttribute("data-sf-composition-id")===e)return t;return null}info(e){const t=this.describe(e)||{};return{label:"string"==typeof t.label&&t.label.trim()?t.label:e.id,badges:Array.isArray(t.badges)?t.badges.filter(e=>"string"==typeof e&&e.trim()).slice(0,4):[]}}select(e,{focus:t=!1,emit:i=!0}={}){if(null!==e&&!this.byId.has(e))return this;if(this.editing&&this.editing.id!==e&&this.finishEdit(!0),this.selectedId===e)return this;if(this.selectedId=e,this.renderTreeSelection(),this.renderToolbar(),this.schedule(),null!==e){const t=this.byId.get(e),i=this.nodes.filter(e=>e.parent===t.parent&&e.slot===t.slot),{label:s}=this.info(t);this.live.textContent=`${u(this.messages.selected,{label:s})}, ${u(this.messages.position,{index:i.indexOf(t)+1,total:i.length})}`}return t&&this.tree.focus(),i&&this.dispatchEvent(new globalThis.CustomEvent(h.select,{bubbles:!0,composed:!0,detail:Object.freeze({node_id:e})})),this}setHover(e){this.hoverId!==e&&(this.hoverId=e,this.schedule())}nodeAt(e){let t=e instanceof globalThis.Element?e.closest("[data-sf-composition-id]"):null;for(;t&&this.canvas.contains(t);){const e=t.getAttribute("data-sf-composition-id");if(this.byId.has(e))return e;t=t.parentElement?.closest("[data-sf-composition-id]")||null}return null}onPointerMove(e){this.setHover(this.nodeAt(e.target))}onCanvasClick(e){const t=this.nodeAt(e.target);t&&(e.preventDefault(),e.stopPropagation(),this.select(t))}onTreeKey(e){if(this.moving&&this.onMoveKey(e))return;if(" "===e.key&&this.selectedId&&!this.iframe)return e.preventDefault(),void this.startKeyboardMove();const t=this.nodes.findIndex(e=>e.id===this.selectedId),i=this.nodes[t];let s=null;if("ArrowDown"===e.key)s=this.nodes[Math.min(this.nodes.length-1,t+1)];else if("ArrowUp"===e.key)s=this.nodes[Math.max(0,t-1)];else if("Home"===e.key)s=this.nodes[0];else if("End"===e.key)s=this.nodes.at(-1);else if("ArrowLeft"===e.key&&i?.parent)s=this.byId.get(i.parent);else{if("ArrowRight"!==e.key||!i)return"Escape"!==e.key||null===this.selectedId||this.iframe&&!(0,l.Hw)(this)?"Enter"===e.key&&this.iframe&&i?.flat?.editable?(e.preventDefault(),void this.edit(i.id)):"Enter"===e.key&&this.toolbar.querySelector("button")?(e.preventDefault(),void this.toolbar.querySelector("button").focus()):void 0:(e.preventDefault(),void this.select(null));s=this.nodes.find(e=>e.parent===i.id)||null}e.preventDefault(),s&&this.select(s.id)}onToolbarKey(e){const t=[...this.toolbar.querySelectorAll("button")],i=t.indexOf(globalThis.document.activeElement);if("Escape"===e.key)e.preventDefault(),this.tree.focus();else if("ArrowRight"===e.key||"ArrowLeft"===e.key){e.preventDefault();const s="ArrowRight"===e.key==("rtl"!==globalThis.getComputedStyle(this).direction)?1:-1;t[(i+s+t.length)%t.length]?.focus()}}onToolbarClick(e){const t=e.target instanceof globalThis.Element?e.target.closest("button[data-action]"):null;t&&this.selectedId&&this.dispatchEvent(new globalThis.CustomEvent(h.action,{bubbles:!0,composed:!0,detail:Object.freeze({action_id:t.dataset.action,node_id:this.selectedId})}))}onInsertionClick(e){const t=e.target instanceof globalThis.Element?e.target.closest("button[data-parent]"):null;if(!t)return;const i={parent_id:t.dataset.parent,slot:t.dataset.slot,index:Number(t.dataset.index)};this.setInsertionTarget(i),this.positionInsertions(),this.dispatchEvent(new globalThis.CustomEvent(h.insert,{bubbles:!0,composed:!0,detail:Object.freeze({...i})}))}renderTree(){this.tree&&(this.tree.setAttribute("aria-label",this.getAttribute("label")||this.messages.tree),this.tree.replaceChildren(...this.nodes.map(e=>{const t=globalThis.document.createElement("div"),i=this.nodes.filter(t=>t.parent===e.parent&&t.slot===e.slot),{label:s,badges:n}=this.info(e);return t.id=`${this.id||"sf-overlay"}-item-${e.id}`.replace(/[^A-Za-z0-9_-]/gu,"-"),t.setAttribute("role","treeitem"),t.setAttribute("aria-level",String(e.level)),t.setAttribute("aria-setsize",String(i.length)),t.setAttribute("aria-posinset",String(i.indexOf(e)+1)),t.setAttribute("aria-label",n.length?`${s} (${n.join(", ")})`:s),t.dataset.nodeId=e.id,t})),this.renderTreeSelection())}renderTreeSelection(){let e=null;for(const t of this.tree?.children||[]){const i=t.dataset.nodeId===this.selectedId;t.setAttribute("aria-selected",i?"true":"false"),i&&(e=t.id)}e?this.tree.setAttribute("aria-activedescendant",e):this.tree?.removeAttribute("aria-activedescendant")}renderToolbar(){this.toolbar&&(this.toolbar.setAttribute("aria-label",this.messages.toolbar),this.toolbar.replaceChildren(...this.actions.map(e=>{const t=globalThis.document.createElement("button");return t.type="button",t.className="sf-composition-overlay-action",t.dataset.action=e.id,t.textContent=e.label,t})),this.toolbar.hidden=!this.selectedId||0===this.actions.length)}schedule(){!this.frameRequest&&this.connection&&(this.frameRequest=globalThis.requestAnimationFrame(()=>{this.frameRequest=0,this.position()}))}nodeBox(e){const t="string"==typeof e?this.byId.get(e):null;if(!t)return null;if(!t.flat)return this.element(e)?.getBoundingClientRect()??null;const i=this.view;if(!i||!this.frameDoc)return null;const{element:s,rect:n}=t.flat;if(s){if(!s.isConnected||s.ownerDocument!==this.frameDoc)return null;const e=s.getBoundingClientRect();return e.width||e.height?E({x:e.left,y:e.top,width:e.width,height:e.height},i):null}return E({x:n.x-i.scrollX,y:n.y-i.scrollY,width:n.width,height:n.height},i)}place(e,t){const i=t?this.nodeBox(t):null;if(!i)return e.hidden=!0,null;e.hidden=!1,e.style.insetInlineStart="",Object.assign(e.style,{left:`${i.left}px`,top:`${i.top}px`,width:`${i.width}px`,height:`${i.height}px`});const{label:s,badges:n}=this.info(this.byId.get(t));return e.firstChild.textContent=n.length?`${s} · ${n.join(" · ")}`:s,i}position(){if(!this.canvas&&!this.iframe)return;this.iframe&&(this.view=this.frameMetrics(),this.applyClip(this.view?.clip??null)),this.place(this.hoverFrame,this.hoverId&&this.hoverId!==this.selectedId?this.hoverId:null);const e=this.place(this.selectedFrame,this.selectedId);if(this.iframe)return this.positionFrameToolbar(e),void this.positionInsertions();if(e?this.toolbar.hidden=0===this.actions.length:this.toolbar.contains(globalThis.document.activeElement)||(this.toolbar.hidden=!0),e&&!this.toolbar.hidden){const t=this.toolbar.getBoundingClientRect(),i=e.top-t.height-4,s=i>=0?i:Math.min(globalThis.innerHeight-t.height,e.bottom+4),n="rtl"===globalThis.getComputedStyle(this).direction?e.right-t.width:e.left,o=Math.max(0,Math.min(n,globalThis.innerWidth-t.width));Object.assign(this.toolbar.style,{top:`${s}px`,left:`${o}px`})}this.positionInsertions()}positionInsertions(){const e=this.selectedId?this.byId.get(this.selectedId):null,t=e?.flat?this.flatInsertionPoints(e):[];if(e?.parent&&!e.flat){const i=this.byId.get(e.parent),s=i.slots[e.slot]||[];for(let n=0;n<=s.length;n+=1)t.push({parent:i.id,slot:e.slot,index:n,before:s[n],after:s[n-1]})}if(e&&!e.flat)for(const[i,s]of Object.entries(e.slots))t.push({parent:e.id,slot:i,index:s.length,after:s.at(-1),end:!0});const i=this.insertionTarget,s=new Map([...this.insertionLayer.children].map(e=>[e.dataset.key,e])),n=new Set;for(const e of t){const t=this.nodeBox(e.before)||this.nodeBox(e.after)||this.nodeBox(e.parent);if(!t)continue;const o=`${e.parent}|${e.slot}|${e.index}`;n.add(o);let r=s.get(o);if(!r){r=globalThis.document.createElement("button"),r.type="button",r.className="sf-composition-overlay-insert",r.dataset.key=o,r.dataset.parent=e.parent,r.dataset.slot=e.slot,r.dataset.index=String(e.index);const t=globalThis.document.createElement("span");t.className="sf-composition-overlay-insert-mark",t.setAttribute("aria-hidden","true"),t.textContent="+",r.append(t),this.insertionLayer.append(r)}const l=e.before&&!e.end?t.top:t.bottom,a=Boolean(i&&i.parent_id===e.parent&&i.slot===e.slot&&i.index===e.index);r.setAttribute("aria-pressed",a?"true":"false"),r.setAttribute("aria-label",u(this.messages.insertAt,{slot:e.slot,index:e.index+1})),Object.assign(r.style,{left:`${t.left}px`,top:`${l}px`,width:`${t.width}px`})}for(const[e,t]of s)n.has(e)||t.remove()}flatInsertionPoints(e){const t=this.nodes.filter(t=>t.parent===e.parent).map(e=>e.id),i=e.parent??"",s=[];for(let e=0;e<=t.length;e+=1)s.push({parent:i,slot:"default",index:e,before:t[e],after:t[e-1]});const n=e.slots.default||[];return n.length&&s.push({parent:e.id,slot:"default",index:n.length,after:n.at(-1),end:!0}),s.filter(e=>this.dropFilter({parent_id:e.parent,slot:e.slot,index:e.index},null))}frameMetrics(){const e=this.iframe,t=this.frameDoc?.defaultView;if(!e?.isConnected||!t)return null;const i=e.getBoundingClientRect();if(!i.width&&!i.height)return null;const s=globalThis.getComputedStyle(e),n=(e,t="")=>({top:T(s[`${e}Top${t}`]),right:T(s[`${e}Right${t}`]),bottom:T(s[`${e}Bottom${t}`]),left:T(s[`${e}Left${t}`])}),o=w({rect:i,layout:{width:e.offsetWidth,height:e.offsetHeight},border:n("border","Width"),padding:n("padding"),inner:{width:t.innerWidth,height:t.innerHeight},scroll:{x:t.scrollX,y:t.scrollY}});let r={left:o.left,top:o.top,right:o.left+o.width,bottom:o.top+o.height};const l=globalThis.document.documentElement;for(let t=e.parentElement;t&&t!==l&&t!==globalThis.document.body;t=t.parentElement){const e=globalThis.getComputedStyle(t);if("visible"===e.overflowX&&"visible"===e.overflowY)continue;const i=t.getBoundingClientRect(),s=i.left+t.clientLeft,n=i.top+t.clientTop;r=A(r,{left:s,top:n,right:s+t.clientWidth,bottom:n+t.clientHeight})}return o.clip=A(r,{left:0,top:0,right:l.clientWidth,bottom:l.clientHeight}),o}applyClip(e){const t=this.layer.getBoundingClientRect(),i=!e||e.right<=e.left||e.bottom<=e.top?"inset(50%)":`inset(${Math.max(0,e.top-t.top)}px ${Math.max(0,t.right-e.right)}px ${Math.max(0,t.bottom-e.bottom)}px ${Math.max(0,e.left-t.left)}px)`;this.layer.style.clipPath=i,this.insertionLayer.style.clipPath=i}positionFrameToolbar(e){const t=this.view?.clip,i=Boolean(e&&t&&e.right>t.left&&e.left<t.right&&e.bottom>t.top&&e.top<t.bottom);if(i?this.toolbar.hidden=0===this.actions.length:this.toolbar.contains(globalThis.document.activeElement)||(this.toolbar.hidden=!0),!i||this.toolbar.hidden)return;const s=this.toolbar.getBoundingClientRect(),n=e.top-s.height-4;let o=n>=t.top?n:e.bottom+4;o=Math.max(t.top,Math.min(o,t.bottom-s.height));const r="rtl"===globalThis.getComputedStyle(this).direction?e.right-s.width:e.left,l=Math.max(0,Math.min(r,globalThis.document.documentElement.clientWidth-s.width));Object.assign(this.toolbar.style,{top:`${o}px`,left:`${l}px`})}frameNodeAt(e){let t=null,i=1/0;const s=(e,s,n)=>{s*n<i&&(t=e,i=s*n)};for(let t=g(e.target)?e.target:e.target?.parentElement;t;t=t.parentElement){const e=this.elementIds.get(t);if(void 0===e||!this.byId.has(e))continue;const i=t.getBoundingClientRect();s(e,i.width,i.height)}const n=this.frameDoc?.defaultView;if(n&&this.rectNodes.length&&m(e.clientX)){const t=e.clientX+n.scrollX,i=e.clientY+n.scrollY;for(const{id:e,flat:{rect:n}}of this.rectNodes)t>=n.x&&t<=n.x+n.width&&i>=n.y&&i<=n.y+n.height&&s(e,n.width,n.height)}return t}onFrameClick(e){if(this.editing&&this.editing.element.contains(e.target))return;e.preventDefault();const t=this.frameNodeAt(e);t&&e.stopPropagation(),this.select(t)}onFrameDoubleClick(e){if(this.editing)return;const t=this.frameNodeAt(e);t&&this.byId.get(t).flat?.editable&&(e.preventDefault(),this.edit(t))}onFrameKey(e){if(this.editing){if(e.isComposing)return;"Enter"!==e.key&&"Escape"!==e.key||(e.preventDefault(),e.stopPropagation(),this.finishEdit("Enter"===e.key))}else e.defaultPrevented||this.onTreeKey(e)}edit(e){const t="string"==typeof e?this.byId.get(e):null,i=t?.flat?.editable?t.flat.element:null;if(!i||!this.frameDoc||!i.isConnected||i.ownerDocument!==this.frameDoc)return!1;if(this.editing?.id===e)return!0;this.editing&&this.finishEdit(!0);const s=globalThis.document.activeElement===this.tree;this.select(e);const n=i.ownerDocument,o=i.getAttribute("contenteditable");i.setAttribute("contenteditable","plaintext-only");const r="plaintext-only"===i.contentEditable;r||i.setAttribute("contenteditable","true");const a=new AbortController,h={signal:a.signal};i.addEventListener("blur",()=>this.finishEdit(!0),h),i.addEventListener("input",()=>this.schedule(),h),i.addEventListener("beforeinput",e=>{const t=e.inputType||"";("insertParagraph"===t||"insertLineBreak"===t||!r&&t.startsWith("format"))&&e.preventDefault()},h),r||i.addEventListener("paste",e=>{e.preventDefault(),n.execCommand("insertText",!1,(e.clipboardData?.getData("text/plain")||"").replace(/\s+/gu," "))},h),this.editing={id:e,element:i,saved:i.cloneNode(!0),previous:x(i),attribute:o,connection:a,returnFocus:s},(0,l.Ec)(this,!0),this.setAttribute("data-sf-overlay-editing",""),i.focus({preventScroll:!0});const d=n.defaultView?.getSelection();if(d){const e=n.createRange();e.selectNodeContents(i),d.removeAllRanges(),d.addRange(e)}return this.live.textContent=u(this.messages.editing,{label:this.info(t).label}),this.schedule(),!0}finishEdit(e){const t=this.editing;if(!t)return;this.editing=null,t.connection.abort(),(0,l.Ec)(this,!1),this.removeAttribute("data-sf-overlay-editing");const{element:i}=t;null===t.attribute?i.removeAttribute("contenteditable"):i.setAttribute("contenteditable",t.attribute);const s=()=>{i.isConnected&&i.replaceChildren(...t.saved.childNodes)},n=x(i);if(e){if(n!==t.previous){const e=new globalThis.CustomEvent(h.edit,{bubbles:!0,composed:!0,cancelable:!0,detail:Object.freeze({node_id:t.id,value:n,previous:t.previous})});this.dispatchEvent(e),e.defaultPrevented&&s()}}else s();t.returnFocus&&this.isConnected&&this.tree.focus({preventScroll:!0}),this.schedule()}}return e.define("sf-composition-overlay",i),i}i.d(t,["V0",0,h]),s()}catch(I){s(I)}})},"7c1f9c2b36da"(e,t,i){i.a(e,async(e,s)=>{try{i.d(t,{Ld:()=>a,OE:()=>h});var n=i("0d662e4d7d63"),o=e([n]);n=(o.then?(await o)():o)[0];const r=globalThis.__sfSortableSharedV1||(globalThis.__sfSortableSharedV1={targets:new Set,session:null}),l=r.targets;function a(){return r.session?Object.freeze({item:r.session.item,from:r.session.from,group:r.session.group,mode:r.session.mode,input:r.session.input}):null}function h(e){if(!e||"function"!=typeof e.resolve||"function"!=typeof e.drop)throw new TypeError("Drop target needs resolve and drop");return l.add(e),()=>l.delete(e)}s()}catch(d){s(d)}})}};const t={};function i(s){const n=t[s];if(void 0!==n)return n.exports;const o=t[s]={exports:{}};return e[s](o,o.exports,i),o.exports}(()=>{const e="function"==typeof Symbol,t=e?Symbol("webpack queues"):"__webpack_queues__",s=e?Symbol("webpack exports"):"__webpack_exports__",n=e?Symbol("webpack error"):"__webpack_error__",o=e=>{e?.d<1&&(e.d=1,e.forEach(e=>e.r--),e.forEach(e=>e.r--?e.r++:e()))};i.a=(e,i,r)=>{let l;r&&((l=[]).d=-1);const a=new Set,h=e.exports;let d,c,u;const f=new Promise((e,t)=>{u=t,c=e});f[s]=h,f[t]=e=>(l&&e(l),a.forEach(e),f.catch(e=>{})),e.exports=f;i(e=>{let i;d=(e=>e.map(e=>{if(null!==e&&"object"==typeof e){if(e[t])return e;if(e.then){const i=[];i.d=0,e.then(e=>{r[s]=e,o(i)},e=>{r[n]=e,o(i)});const r={};return r[t]=e=>e(i),r}}const i={};return i[t]=e=>{},i[s]=e,i}))(e);const r=()=>d.map(e=>{if(e[n])throw e[n];return e[s]}),h=new Promise(e=>{i=()=>e(r),i.r=0;const s=e=>e!==l&&!a.has(e)&&(a.add(e),e&&!e.d&&(i.r++,e.push(i)));d.map(e=>e[t](s))});return i.r?h:r()},e=>(e?u(f[n]=e):c(h),o(l))),l?.d<0&&(l.d=0)}})(),i.d=(e,t)=>{if(Array.isArray(t))for(var s=0;s<t.length;){var n=t[s++],o=t[s++];i.o(e,n)?0===o&&s++:0===o?Object.defineProperty(e,n,{enumerable:!0,value:t[s++]}):Object.defineProperty(e,n,{enumerable:!0,get:o})}else for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);i("cae046a8699f")})();