@gemboss/ui 0.41.0 → 0.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/CHANGELOG.md +137 -0
  2. package/README.md +120 -10
  3. package/catalog/editor.html +9 -7
  4. package/catalog/index.html +157 -54
  5. package/gemboss-ui.css +3 -3
  6. package/package.json +6 -1
  7. package/parts/components.css +1 -1
  8. package/parts/core.css +2 -2
  9. package/parts/shell.css +1 -1
  10. package/src/assistant/engine.tsx +3 -2
  11. package/src/assistant.css +1 -1
  12. package/src/briefing-card.css +1 -0
  13. package/src/briefing-card.tsx +50 -0
  14. package/src/editor/controls.tsx +52 -8
  15. package/src/editor/index.ts +2 -2
  16. package/src/editor/swatch.ts +133 -9
  17. package/src/editor-plain.js +1 -1
  18. package/src/editor.css +1 -1
  19. package/src/gemboss-tokens.css +1 -1
  20. package/src/icons.tsx +2 -0
  21. package/src/index.ts +10 -4
  22. package/src/portal.tsx +12 -6
  23. package/src/progress-ring.css +1 -0
  24. package/src/progress-ring.tsx +65 -0
  25. package/src/question-card.css +1 -0
  26. package/src/question-card.tsx +116 -0
  27. package/src/range-bar.css +1 -0
  28. package/src/range-bar.tsx +102 -0
  29. package/src/reactions-data.ts +13 -0
  30. package/src/reactions.tsx +36 -10
  31. package/src/spot-art.css +1 -0
  32. package/src/spot-art.tsx +130 -0
  33. package/src/team-chat-data.ts +46 -13
  34. package/src/team-chat-plain.js +1 -1
  35. package/src/team-chat.css +1 -1
  36. package/src/team-chat.tsx +106 -9
  37. package/src/theme-dark.css +1 -1
package/catalog/editor.html CHANGED
@@ -8,7 +8,7 @@
8
8
  .cat-code summary{padding:10px 16px;font-size:13px;cursor:pointer;color:var(--gemboss-text-muted);border-top:1px solid var(--gemboss-divider);min-height:24px}
9
9
  .cat-code pre,.cat-api{margin:0;padding:12px 16px;overflow:auto;background:#0f1012;color:#e8e8e6;font-size:12px;line-height:1.5;border-radius:0}
10
10
  .cat-api{border-radius:12px;margin:0 0 16px}</style></head><body><div class="cat">
11
- <h1>@gemboss/ui 0.41.0 · Editor</h1>
11
+ <h1>@gemboss/ui 0.43.0 · Editor</h1>
12
12
  <p>Khung của mọi editor: <code>EditorFrame</code> (cột trái · khe kéo · preview · cột phải dock trên mép phải preview) và <code>EditorTopbar</code> (← · tiêu đề · cụm giữa · cụm phải · dòng trạng thái). Là đúng khung của theme / page / section editor trong admin. Gói chỉ vẽ KHUNG; chat, Configure, canvas, page picker, menu, Publish là của editor, đi vào bằng slot. Trang HTML thuần nạp <code>editor.css</code> + <code>editor-plain.js</code> rồi gọi <code>gembossUI.initEditorFrame()</code>: kéo khe (chuột, chạm, phím mũi tên / Home / End), đổi thiết bị, mở ⋯ và Publish ▾, ẩn cột trái, Chat | Preview trên điện thoại. <a href="index.html">← Catalog</a></p>
13
13
  <h2>React</h2><pre class="cat-api"><code>import &quot;@gemboss/ui/editor.css&quot;;
14
14
  import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs, EditorSaveState, DeviceToggle } from &quot;@gemboss/ui/editor&quot;;
@@ -319,7 +319,7 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
319
319
  &lt;Field label=&quot;Padding&quot;&gt;&lt;EdgeBox label=&quot;Padding&quot; values={pad} onChange={(side, raw) =&gt; …} onCommit={save} /&gt;&lt;/Field&gt;
320
320
  &lt;Field label=&quot;Image&quot; htmlFor=&quot;img&quot;&gt;&lt;ImageControl id=&quot;img&quot; value={url} onChange={setUrl} /&gt;&lt;/Field&gt;
321
321
  &lt;/InspectorGroup&gt;</code></pre>
322
- <figure class="cat-demo"><figcaption>1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập</figcaption><div class="cat-wide"><iframe title="1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập" style="width:1280px;height:1120px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Settings&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;&lt;aside class=&quot;gemboss-ei gemboss-ei--docked&quot; role=&quot;region&quot; aria-label=&quot;Settings — Hero&quot;&gt;&lt;header class=&quot;gemboss-ei-head&quot;&gt;&lt;span class=&quot;gemboss-ei-title&quot;&gt;Hero&lt;small&gt;hero-banner.default.v1&lt;/small&gt;&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Duplicate section&quot; aria-label=&quot;Duplicate section&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Restore this section to its previous version&quot; aria-label=&quot;Restore this section&quot;&gt;↺&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-ei-tabs&quot; role=&quot;tablist&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;content&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Content&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;design&quot; class=&quot;gemboss-ei-tab on&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Design&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;advanced&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Advanced&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-body&quot;&gt;&lt;div class=&quot;gemboss-ei-pane&quot;&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Layout&lt;small class=&quot;gemboss-ei-gh-note&quot;&gt;· all screens&lt;/small&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Content width&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Content width&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;full&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Full&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;contained&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;Contained&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;narrow&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Narrow&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label&gt;Columns&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Columns&quot; aria-describedby=&quot;:R18u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;2&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;2&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;3&quot; disabled=&quot;&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;3&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;4&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;4&lt;/button&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R18u:&quot;&gt;Disabled while a change is applied.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Spacing&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Padding&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding top&quot; value=&quot;24&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding bottom&quot; value=&quot;24&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label&gt;Margin&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Margin&quot; aria-describedby=&quot;:R19e:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin top&quot; value=&quot;&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin bottom&quot; value=&quot;&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19e:&quot;&gt;Empty edges follow desktop.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Color&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;&lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;#f4efe6&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Overlay&quot; aria-describedby=&quot;:R19u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;Kept as written: the swatch picks 6-digit hex colors only.&quot; aria-describedby=&quot;:Rb9u:&quot; value=&quot;#000000&quot;/&gt;&lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;&lt;p id=&quot;:Rb9u:&quot; class=&quot;gemboss-ei-color-why&quot;&gt;Kept as written: the swatch picks 6-digit hex colors only.&lt;/p&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19u:&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-op&quot;&gt;Opacity&lt;span class=&quot;gemboss-ei-rangeval&quot; data-suffix=&quot;%&quot;&gt;80%&lt;/span&gt;&lt;/label&gt;&lt;input id=&quot;cat-op&quot; type=&quot;range&quot; class=&quot;gemboss-ei-range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;80&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Media&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-img&quot;&gt;Image&lt;/label&gt;&lt;div class=&quot;gemboss-ei-img&quot;&gt;&lt;div class=&quot;gemboss-ei-img-thumb&quot; aria-hidden=&quot;true&quot;&gt;—&lt;/div&gt;&lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;&lt;input id=&quot;cat-img&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Paste image URL…&quot; value=&quot;&quot;/&gt;&lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;closed&quot; aria-expanded=&quot;false&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▸&lt;/span&gt;Motion&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Reveal&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Reveal&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;none&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;None&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;fade&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Fade&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;
322
+ <figure class="cat-demo"><figcaption>1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập</figcaption><div class="cat-wide"><iframe title="1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập" style="width:1280px;height:1120px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Settings&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;&lt;aside class=&quot;gemboss-ei gemboss-ei--docked&quot; role=&quot;region&quot; aria-label=&quot;Settings — Hero&quot;&gt;&lt;header class=&quot;gemboss-ei-head&quot;&gt;&lt;span class=&quot;gemboss-ei-title&quot;&gt;Hero&lt;small&gt;hero-banner.default.v1&lt;/small&gt;&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Duplicate section&quot; aria-label=&quot;Duplicate section&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Restore this section to its previous version&quot; aria-label=&quot;Restore this section&quot;&gt;↺&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-ei-tabs&quot; role=&quot;tablist&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;content&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Content&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;design&quot; class=&quot;gemboss-ei-tab on&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Design&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;advanced&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Advanced&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-body&quot;&gt;&lt;div class=&quot;gemboss-ei-pane&quot;&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Layout&lt;small class=&quot;gemboss-ei-gh-note&quot;&gt;· all screens&lt;/small&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Content width&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Content width&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;full&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Full&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;contained&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;Contained&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;narrow&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Narrow&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label&gt;Columns&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Columns&quot; aria-describedby=&quot;:R18u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;2&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;2&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;3&quot; disabled=&quot;&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;3&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;4&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;4&lt;/button&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R18u:&quot;&gt;Disabled while a change is applied.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Spacing&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Padding&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding top&quot; value=&quot;24&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding bottom&quot; value=&quot;24&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label&gt;Margin&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Margin&quot; aria-describedby=&quot;:R19e:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin top&quot; value=&quot;&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin bottom&quot; value=&quot;&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19e:&quot;&gt;Empty edges follow desktop.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Color&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;&lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;#f4efe6&quot;/&gt;&lt;input class=&quot;gemboss-field gemboss-ei-inp&quot; data-alpha=&quot;&quot; aria-label=&quot;Background opacity&quot; inputMode=&quot;numeric&quot; style=&quot;flex:0 0 64px&quot; value=&quot;100%&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Overlay&quot; aria-describedby=&quot;:R19u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name.&quot; aria-describedby=&quot;:Rb9u:&quot; value=&quot;#000000&quot;/&gt;&lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;&lt;p id=&quot;:Rb9u:&quot; class=&quot;gemboss-ei-color-why&quot;&gt;Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name.&lt;/p&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19u:&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-op&quot;&gt;Opacity&lt;span class=&quot;gemboss-ei-rangeval&quot; data-suffix=&quot;%&quot;&gt;80%&lt;/span&gt;&lt;/label&gt;&lt;input id=&quot;cat-op&quot; type=&quot;range&quot; class=&quot;gemboss-ei-range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;80&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Media&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-img&quot;&gt;Image&lt;/label&gt;&lt;div class=&quot;gemboss-ei-img&quot;&gt;&lt;div class=&quot;gemboss-ei-img-thumb&quot; aria-hidden=&quot;true&quot;&gt;—&lt;/div&gt;&lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;&lt;input id=&quot;cat-img&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Paste image URL…&quot; value=&quot;&quot;/&gt;&lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;closed&quot; aria-expanded=&quot;false&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▸&lt;/span&gt;Motion&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Reveal&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Reveal&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;none&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;None&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;fade&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Fade&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;
323
323
  &lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;
324
324
  &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Settings&lt;/button&gt;
325
325
  &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;
@@ -422,6 +422,7 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
422
422
  &lt;div class=&quot;gemboss-ei-color&quot;&gt;
423
423
  &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;
424
424
  &lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;#f4efe6&quot;/&gt;
425
+ &lt;input class=&quot;gemboss-field gemboss-ei-inp&quot; data-alpha=&quot;&quot; aria-label=&quot;Background opacity&quot; inputMode=&quot;numeric&quot; style=&quot;flex:0 0 64px&quot; value=&quot;100%&quot;/&gt;
425
426
  &lt;/div&gt;
426
427
  &lt;/div&gt;
427
428
  &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
@@ -430,9 +431,9 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
430
431
  &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Overlay&quot; aria-describedby=&quot;:R19u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;
431
432
  &lt;/div&gt;
432
433
  &lt;div class=&quot;gemboss-ei-color&quot;&gt;
433
- &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;Kept as written: the swatch picks 6-digit hex colors only.&quot; aria-describedby=&quot;:Rb9u:&quot; value=&quot;#000000&quot;/&gt;
434
+ &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name.&quot; aria-describedby=&quot;:Rb9u:&quot; value=&quot;#000000&quot;/&gt;
434
435
  &lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;
435
- &lt;p id=&quot;:Rb9u:&quot; class=&quot;gemboss-ei-color-why&quot;&gt;Kept as written: the swatch picks 6-digit hex colors only.&lt;/p&gt;
436
+ &lt;p id=&quot;:Rb9u:&quot; class=&quot;gemboss-ei-color-why&quot;&gt;Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name.&lt;/p&gt;
436
437
  &lt;/div&gt;
437
438
  &lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19u:&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;
438
439
  &lt;/div&gt;
@@ -475,7 +476,7 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
475
476
  &lt;/aside&gt;
476
477
  &lt;/div&gt;
477
478
  &lt;/div&gt;</code></pre></details></figure>
478
- <figure class="cat-demo"><figcaption>390 (điện thoại): ô nhập 16px, control 44px</figcaption><div class="cat-wide"><iframe title="390 (điện thoại): ô nhập 16px, control 44px" style="width:390px;height:1240px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Settings&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;&lt;aside class=&quot;gemboss-ei gemboss-ei--docked&quot; role=&quot;region&quot; aria-label=&quot;Settings — Hero&quot;&gt;&lt;header class=&quot;gemboss-ei-head&quot;&gt;&lt;span class=&quot;gemboss-ei-title&quot;&gt;Hero&lt;small&gt;hero-banner.default.v1&lt;/small&gt;&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Duplicate section&quot; aria-label=&quot;Duplicate section&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Restore this section to its previous version&quot; aria-label=&quot;Restore this section&quot;&gt;↺&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-ei-tabs&quot; role=&quot;tablist&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;content&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Content&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;design&quot; class=&quot;gemboss-ei-tab on&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Design&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;advanced&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Advanced&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-body&quot;&gt;&lt;div class=&quot;gemboss-ei-pane&quot;&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Layout&lt;small class=&quot;gemboss-ei-gh-note&quot;&gt;· all screens&lt;/small&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Content width&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Content width&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;full&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Full&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;contained&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;Contained&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;narrow&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Narrow&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label&gt;Columns&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Columns&quot; aria-describedby=&quot;:R18u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;2&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;2&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;3&quot; disabled=&quot;&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;3&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;4&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;4&lt;/button&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R18u:&quot;&gt;Disabled while a change is applied.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Spacing&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Padding&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding top&quot; value=&quot;24&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding bottom&quot; value=&quot;24&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label&gt;Margin&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Margin&quot; aria-describedby=&quot;:R19e:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin top&quot; value=&quot;&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin bottom&quot; value=&quot;&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19e:&quot;&gt;Empty edges follow desktop.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Color&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;&lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;#f4efe6&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Overlay&quot; aria-describedby=&quot;:R19u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;Kept as written: the swatch picks 6-digit hex colors only.&quot; aria-describedby=&quot;:Rb9u:&quot; value=&quot;#000000&quot;/&gt;&lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;&lt;p id=&quot;:Rb9u:&quot; class=&quot;gemboss-ei-color-why&quot;&gt;Kept as written: the swatch picks 6-digit hex colors only.&lt;/p&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19u:&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-op&quot;&gt;Opacity&lt;span class=&quot;gemboss-ei-rangeval&quot; data-suffix=&quot;%&quot;&gt;80%&lt;/span&gt;&lt;/label&gt;&lt;input id=&quot;cat-op&quot; type=&quot;range&quot; class=&quot;gemboss-ei-range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;80&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Media&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-img&quot;&gt;Image&lt;/label&gt;&lt;div class=&quot;gemboss-ei-img&quot;&gt;&lt;div class=&quot;gemboss-ei-img-thumb&quot; aria-hidden=&quot;true&quot;&gt;—&lt;/div&gt;&lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;&lt;input id=&quot;cat-img&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Paste image URL…&quot; value=&quot;&quot;/&gt;&lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;closed&quot; aria-expanded=&quot;false&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▸&lt;/span&gt;Motion&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Reveal&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Reveal&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;none&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;None&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;fade&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Fade&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;
479
+ <figure class="cat-demo"><figcaption>390 (điện thoại): ô nhập 16px, control 44px</figcaption><div class="cat-wide"><iframe title="390 (điện thoại): ô nhập 16px, control 44px" style="width:390px;height:1240px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Settings&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;&lt;aside class=&quot;gemboss-ei gemboss-ei--docked&quot; role=&quot;region&quot; aria-label=&quot;Settings — Hero&quot;&gt;&lt;header class=&quot;gemboss-ei-head&quot;&gt;&lt;span class=&quot;gemboss-ei-title&quot;&gt;Hero&lt;small&gt;hero-banner.default.v1&lt;/small&gt;&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Duplicate section&quot; aria-label=&quot;Duplicate section&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Restore this section to its previous version&quot; aria-label=&quot;Restore this section&quot;&gt;↺&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-ei-tabs&quot; role=&quot;tablist&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;content&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Content&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;design&quot; class=&quot;gemboss-ei-tab on&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Design&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;advanced&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Advanced&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-body&quot;&gt;&lt;div class=&quot;gemboss-ei-pane&quot;&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Layout&lt;small class=&quot;gemboss-ei-gh-note&quot;&gt;· all screens&lt;/small&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Content width&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Content width&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;full&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Full&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;contained&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;Contained&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;narrow&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Narrow&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label&gt;Columns&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Columns&quot; aria-describedby=&quot;:R18u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;2&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;2&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;3&quot; disabled=&quot;&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;3&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;4&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;4&lt;/button&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R18u:&quot;&gt;Disabled while a change is applied.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Spacing&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Padding&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding top&quot; value=&quot;24&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding bottom&quot; value=&quot;24&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label&gt;Margin&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Margin&quot; aria-describedby=&quot;:R19e:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin top&quot; value=&quot;&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin bottom&quot; value=&quot;&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19e:&quot;&gt;Empty edges follow desktop.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Color&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;&lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;#f4efe6&quot;/&gt;&lt;input class=&quot;gemboss-field gemboss-ei-inp&quot; data-alpha=&quot;&quot; aria-label=&quot;Background opacity&quot; inputMode=&quot;numeric&quot; style=&quot;flex:0 0 64px&quot; value=&quot;100%&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Overlay&quot; aria-describedby=&quot;:R19u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name.&quot; aria-describedby=&quot;:Rb9u:&quot; value=&quot;#000000&quot;/&gt;&lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;&lt;p id=&quot;:Rb9u:&quot; class=&quot;gemboss-ei-color-why&quot;&gt;Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name.&lt;/p&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19u:&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-op&quot;&gt;Opacity&lt;span class=&quot;gemboss-ei-rangeval&quot; data-suffix=&quot;%&quot;&gt;80%&lt;/span&gt;&lt;/label&gt;&lt;input id=&quot;cat-op&quot; type=&quot;range&quot; class=&quot;gemboss-ei-range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;80&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Media&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-img&quot;&gt;Image&lt;/label&gt;&lt;div class=&quot;gemboss-ei-img&quot;&gt;&lt;div class=&quot;gemboss-ei-img-thumb&quot; aria-hidden=&quot;true&quot;&gt;—&lt;/div&gt;&lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;&lt;input id=&quot;cat-img&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Paste image URL…&quot; value=&quot;&quot;/&gt;&lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;closed&quot; aria-expanded=&quot;false&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▸&lt;/span&gt;Motion&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Reveal&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Reveal&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;none&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;None&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;fade&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Fade&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;
479
480
  &lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;
480
481
  &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Settings&lt;/button&gt;
481
482
  &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;
@@ -578,6 +579,7 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
578
579
  &lt;div class=&quot;gemboss-ei-color&quot;&gt;
579
580
  &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;
580
581
  &lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;#f4efe6&quot;/&gt;
582
+ &lt;input class=&quot;gemboss-field gemboss-ei-inp&quot; data-alpha=&quot;&quot; aria-label=&quot;Background opacity&quot; inputMode=&quot;numeric&quot; style=&quot;flex:0 0 64px&quot; value=&quot;100%&quot;/&gt;
581
583
  &lt;/div&gt;
582
584
  &lt;/div&gt;
583
585
  &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
@@ -586,9 +588,9 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
586
588
  &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Overlay&quot; aria-describedby=&quot;:R19u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;
587
589
  &lt;/div&gt;
588
590
  &lt;div class=&quot;gemboss-ei-color&quot;&gt;
589
- &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;Kept as written: the swatch picks 6-digit hex colors only.&quot; aria-describedby=&quot;:Rb9u:&quot; value=&quot;#000000&quot;/&gt;
591
+ &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name.&quot; aria-describedby=&quot;:Rb9u:&quot; value=&quot;#000000&quot;/&gt;
590
592
  &lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;
591
- &lt;p id=&quot;:Rb9u:&quot; class=&quot;gemboss-ei-color-why&quot;&gt;Kept as written: the swatch picks 6-digit hex colors only.&lt;/p&gt;
593
+ &lt;p id=&quot;:Rb9u:&quot; class=&quot;gemboss-ei-color-why&quot;&gt;Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name.&lt;/p&gt;
592
594
  &lt;/div&gt;
593
595
  &lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19u:&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;
594
596
  &lt;/div&gt;