@simai-studio/ui 5.20261023.212 → 5.20261025.207

package/distr/smart/composition-overlay/smart.manifest.json

@@ -1,9 +1,9 @@
 {
   "schema_version": 2,
   "id": "smart.composition-overlay",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "title": "Composition overlay",
-  "summary": "Editor chrome over a rendered Composition Document: frames, labels, badges, action toolbar, insertion places, drag and keyboard moves and a keyboard tree, without changing the canvas HTML.",
+  "summary": "Editor chrome over a rendered Composition Document: frames, labels, badges, action toolbar, insertion places, drag and keyboard moves and a keyboard tree, without changing the canvas HTML. A framed mode draws the same chrome over a same-origin iframe fed a flat node list, with plain-string inline editing.",
   "kind": "smart",
   "reuse_mode": "whole",
   "lifecycle": "experimental",
@@ -45,6 +45,11 @@
       "label": {
         "type": "string",
         "default": ""
+      },
+      "frame": {
+        "type": "string",
+        "default": "",
+        "description": "id of a same-origin iframe canvas (framed mode, fed by setNodes); used instead of for"
       }
     },
     "additionalProperties": false
@@ -78,7 +83,76 @@
     },
     "browser_api": {
       "type": "object",
-      "description": "Once loaded, SF.CompositionOverlay exposes OVERLAY_EVENTS, overlayNodes(document) and checkOverlayActions(actions)."
+      "description": "Once loaded, SF.CompositionOverlay exposes OVERLAY_EVENTS, overlayNodes(document), checkOverlayActions(actions) and checkOverlayNodes(nodes)."
+    },
+    "frame_canvas": {
+      "type": "object",
+      "description": "Framed mode: the canvas is a same-origin iframe (sandbox allow-same-origin is enough; the frame needs no script). The overlay reads the frame's document, listens to its pointer, key, scroll and resize events and maps frame coordinates to the host through the iframe's position, border, padding, transform or zoom and the frame's scroll. It writes nothing into the frame except a temporary contenteditable on the element being edited. A frame that reloads (srcdoc) is listened to again on load; the host then calls setNodes with the new document's elements."
+    },
+    "nodes": {
+      "type": "array",
+      "description": "Framed mode's flat node list, in selection order. element is a node inside the frame document; rect is in frame-document coordinates (viewport box plus the frame's scroll). parent names another node of the list (siblings share a parent; the top level has none). editable allows plain-string inline editing of the element.",
+      "items": {
+        "type": "object",
+        "required": [
+          "id",
+          "kind"
+        ],
+        "properties": {
+          "id": {
+            "type": "string",
+            "minLength": 1
+          },
+          "kind": {
+            "type": "string",
+            "minLength": 1
+          },
+          "rect": {
+            "type": "object",
+            "required": [
+              "x",
+              "y",
+              "width",
+              "height"
+            ],
+            "properties": {
+              "x": {
+                "type": "number"
+              },
+              "y": {
+                "type": "number"
+              },
+              "width": {
+                "type": "number",
+                "minimum": 0
+              },
+              "height": {
+                "type": "number",
+                "minimum": 0
+              }
+            },
+            "additionalProperties": false
+          },
+          "element": {
+            "type": "object",
+            "description": "Element of the frame document"
+          },
+          "label": {
+            "type": "string"
+          },
+          "parent": {
+            "type": [
+              "string",
+              "null"
+            ]
+          },
+          "editable": {
+            "type": "boolean",
+            "description": "Requires element"
+          }
+        },
+        "additionalProperties": false
+      }
     }
   },
   "methods": {
@@ -98,6 +172,22 @@
         ]
       }
     },
+    "attachFrame": {
+      "summary": "Binds the overlay to a same-origin iframe canvas (framed mode).",
+      "arguments": [
+        {
+          "name": "iframe",
+          "type": "Element"
+        }
+      ],
+      "returns": {
+        "type": [
+          "object",
+          "boolean",
+          "null"
+        ]
+      }
+    },
     "setDocument": {
       "summary": "Sets the Document and describe(node) → {label, badges}.",
       "arguments": [
@@ -118,6 +208,26 @@
         ]
       }
     },
+    "setNodes": {
+      "summary": "Sets the framed canvas's flat node list and an optional describe(node) → {label, badges}.",
+      "arguments": [
+        {
+          "name": "nodes",
+          "type": "array"
+        },
+        {
+          "name": "options",
+          "type": "object"
+        }
+      ],
+      "returns": {
+        "type": [
+          "object",
+          "boolean",
+          "null"
+        ]
+      }
+    },
     "setActions": {
       "summary": "Sets toolbar actions {id, label}.",
       "arguments": [
@@ -207,6 +317,29 @@
           "null"
         ]
       }
+    },
+    "edit": {
+      "summary": "Starts plain-string inline editing of an editable node in the frame; returns whether it started.",
+      "arguments": [
+        {
+          "name": "id",
+          "type": "string"
+        }
+      ],
+      "returns": {
+        "type": "boolean"
+      }
+    },
+    "refresh": {
+      "summary": "Measures again on the next frame, after a change no observer reports (a transform on an ancestor).",
+      "arguments": [],
+      "returns": {
+        "type": [
+          "object",
+          "boolean",
+          "null"
+        ]
+      }
     }
   },
   "events": {
@@ -243,7 +376,7 @@
       }
     },
     "sf-composition-overlay-insert": {
-      "summary": "Insertion was requested at a place, optionally with a library item.",
+      "summary": "Insertion was requested at a place, optionally with a library item. In framed mode the top-level list is parent_id \"\" and slot is \"default\".",
       "payload": {
         "type": "object",
         "required": [
@@ -301,6 +434,28 @@
           }
         }
       }
+    },
+    "sf-composition-overlay-edit": {
+      "summary": "A plain-string inline edit was committed with a changed value (framed mode). Cancelable: preventDefault puts the previous text back.",
+      "payload": {
+        "type": "object",
+        "required": [
+          "node_id",
+          "value",
+          "previous"
+        ],
+        "properties": {
+          "node_id": {
+            "type": "string"
+          },
+          "value": {
+            "type": "string"
+          },
+          "previous": {
+            "type": "string"
+          }
+        }
+      }
     }
   },
   "state": {
@@ -310,6 +465,12 @@
         "picking",
         "dropped",
         "cancelled"
+      ],
+      "edit": [
+        "idle",
+        "editing",
+        "committed",
+        "cancelled"
       ]
     },
     "visual_states": [
@@ -356,7 +517,7 @@
       "Space",
       "Escape"
     ],
-    "focus": "The tree has one treeitem per node; arrows move in document order and between parent and child, Enter opens the toolbar, Escape returns or clears. Space starts a keyboard move, arrows choose a place, Enter drops, Escape cancels. Selection and moves are announced."
+    "focus": "The tree has one treeitem per node; arrows move in document order and between parent and child, Enter opens the toolbar, Escape returns or clears. Space starts a keyboard move, arrows choose a place, Enter drops, Escape cancels. Selection and moves are announced. In framed mode the tree follows the node list order, pointer and keys inside the frame select too, Enter on an editable node starts plain-text editing in the frame (Enter commits, Escape cancels, focus returns to the tree), and Escape gives way to an inner open surface."
   },
   "presentation": {
     "themes": [
@@ -424,11 +585,11 @@
     "source_artifacts": [
       {
         "path": "src/smart/composition-overlay/index.js",
-        "sha256": "10d9d65a7d0d3e09837e035ec3a88ed881f7bd502463de7b8e9ca62543aaa7bf"
+        "sha256": "52b96a10f46ff4405631e61cdf7315b8a4fe9fcb9de25dfc3e86ca405ef3b52c"
       },
       {
         "path": "src/smart/composition-overlay/scss/_smart__composition-overlay.scss",
-        "sha256": "cd1f2c00674a77cd820417a4f7577640eb572ac6ad3bd61e529abff3c792c6d0"
+        "sha256": "d2de68fc3a34d6359fb8e766f5465b269168885c88b7c4a7d7b5000918731e01"
       },
       {
         "path": "src/smart/composition-overlay/rule.js",
@@ -436,11 +597,11 @@
       },
       {
         "path": "src/smart/composition-overlay/docs.md",
-        "sha256": "345f8faeeae468ca3eb22b3a1e11ba06f5c6c34ea5cb7c6bc4038c4b038b6565"
+        "sha256": "482c92b3ffd470a1ea9c915ba45499f91e1d509b531bd51f62691eb9b89d2356"
       },
       {
         "path": "src/core/js/composition/overlay.mjs",
-        "sha256": "3a735e7de5e7009a3eebd2e793f24c5b15482807d3363e64de96ece6c1e301a4"
+        "sha256": "5b64ed24bf02a528979f215dd54126fdb613e9a42143035c212a0095271649ae"
       },
       {
         "path": "src/core/js/composition/sortable.mjs",
@@ -449,17 +610,23 @@
       {
         "path": "src/core/js/composition/canonical.mjs",
         "sha256": "aa6b44b2b81fc71040a32c6d8521201b7b8f23881ba2844c5a749b2e6ba3587c"
+      },
+      {
+        "path": "src/core/js/open-surface-mark.js",
+        "sha256": "4a739204c926a88145b6ca111dc3ec6056a7446dfe37b39c621af45a1d090724"
       }
     ],
     "generated_runtime": []
   },
   "ai_guidance": {
-    "use_when": "Use sf-composition-overlay on an editor page over SF.Composition.render output. Treat every event as intent: the host changes the Document, saves it with an expected revision, validates and re-renders.",
+    "use_when": "Use sf-composition-overlay on an editor page over SF.Composition.render output. Treat every event as intent: the host changes the Document, saves it with an expected revision, validates and re-renders. For a canvas isolated in a same-origin iframe (a mail letter), use attachFrame (or frame=\"id\") and setNodes with a flat node list; edits arrive as sf-composition-overlay-edit.",
     "do_not": [
       "Do not copy generated ui-smart code",
       "Do not write editor markup into the canvas HTML",
       "Do not treat setDropFilter as validation; Document validation stays authoritative",
-      "Do not put the overlay after the canvas in Tab order"
+      "Do not put the overlay after the canvas in Tab order",
+      "Do not expect the overlay to keep an edited text: it raises the intent, the host updates its model and re-renders the frame",
+      "Do not point the framed mode at a cross-origin frame"
     ],
     "required_reads": [
       "inputs",

package/distr/smart/dropdown/css/dropdown.min.css

@@ -0,0 +1 @@
+@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}}