@optionfactory/fml 9.0.0-rc7 → 9.0.0-rc8

package/README.md

@@ -73,7 +73,7 @@ ful.AsyncEvents.asyncOn(wizard, 'section:requested:dettagli', async (e) => {
 });
 ```
 
-The component awaits the union of the answers: the loading ring covers the wait, a failed delivery paints the section's problems and rejects the wizard's `move()`, and nobody listening is a plain activation at zero cost, so server-rendered sections never use the mechanism at all. `refresh()` re-fires explicitly (wizard by name or section, tabs by index or section; dialog and drawer argument-less), the drawer's `update()` keeping its own open-answer-deliver cycle.
+The component awaits the union of the answers: the loading ring covers the wait, a failed delivery paints the section's problems and rejects the wizard's `move()`, and nobody listening is a plain activation at zero cost, so server-rendered sections never use the mechanism at all. `refresh()` re-fires explicitly (wizard by name or section, tabs by index or section; dialog and drawer argument-less), the `update()` of the drawer and the dialog keeping its own open-answer-deliver cycle.
 
 The palette is `light-dark()` based and follows the page's `color-scheme` alone: pin `color-scheme: light` to disable the dark side, declare `light dark` to follow the os, `dark` to force it; the library declares nothing itself, and it works per-subtree too. The theme's ink pairs hold WCAG AA in both schemes, kept honest by a suite that computes the ratios; wherever the accent is read instead of filled (ghost outlines, done steps, success toasts) use `--ful-accent-ink`, the accent tuned for text.
 

package/dist/custom-elements.json

@@ -48,7 +48,7 @@
           "name": "Dialog",
           "tagName": "ful-dialog",
           "customElement": true,
-          "description": "A modal dialog on the native platform: header, body and buttons, the header attribute naming its heading, opened by any element carrying dialog-target set to its id, or programmatically through open()/ask(), which resolve with the data-result of the button that closed the dialog (null on Escape). Longer explanations belong here, shorter ones in ful-tooltip.",
+          "description": "A modal dialog on the native platform: header, body and buttons, the header attribute naming its heading, opened by any element carrying dialog-target set to its id, or programmatically through open()/ask(), which answer with how the dialog ended, or through update(callback), which opens it on a loading state and then shows either what the callback delivered or the problems of a rejection. Longer explanations belong here, shorter ones in ful-tooltip.",
           "attributes": [
             {
               "name": "header",
@@ -63,6 +63,13 @@
               "type": {
                 "text": "boolean"
               }
+            },
+            {
+              "name": "close-on-submit",
+              "description": "For the dialog whose answer is a form succeeding rather than a button being pressed: its own form submitting successfully closes it and answers with the response. Opt in, and its own form only, a ful-form the body holds directly, since a ful-table wraps its filters in a form of its own and searching one is not the dialog being answered.",
+              "type": {
+                "text": "boolean"
+              }
             }
           ],
           "slots": [
@@ -72,13 +79,13 @@
             },
             {
               "name": "buttons",
-              "description": "Buttons closing the dialog; each carries a data-result that ask() resolves with. Without this slot a localized acknowledge button is shown."
+              "description": "Buttons closing the dialog; each carries a data-result that the answer carries back. Without this slot a localized acknowledge button is shown."
             }
           ],
           "events": [
             {
               "name": "close",
-              "description": "Fired when the dialog closes, carrying the data-result of the button that closed it, or null on Escape; ask() and open() resolve with the same answer, and a dialog leaving the document while open answers its waiters with null.",
+              "description": "Fired when the dialog closes, carrying how it ended: dismissed tells a cancel from an answer, result the data-result of the button that closed it, response what a submit answered with. ask() and open() resolve with the same object, and a dialog leaving the document while open answers its waiters with a dismissal.",
               "type": {
                 "text": "CustomEvent"
               }
@@ -112,6 +119,13 @@
               "type": {
                 "text": "string"
               }
+            },
+            {
+              "name": "close-on-submit",
+              "description": "For the drawer whose ending is a form succeeding rather than its close button being pressed: the form its content holds directly submitting successfully closes it, the close event carrying the response. Opt in, and its own form only, since a ful-table wraps its filters in a form of its own and searching one is not the drawer finishing.",
+              "type": {
+                "text": "boolean"
+              }
             }
           ],
           "slots": [
@@ -127,7 +141,7 @@
           "events": [
             {
               "name": "close",
-              "description": "Fired when the drawer closes, by its close button or Escape.",
+              "description": "Fired when the drawer closes, carrying how it ended: dismissed tells the close button and Escape from a form that closed it under close-on-submit, and response what that submit answered with, a save answering with no body at all being a save all the same.",
               "type": {
                 "text": "CustomEvent"
               }

package/dist/fml.css

@@ -12,7 +12,7 @@
 @layer ful.components{ful-spinner>.ful-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}ful-spinner{display:inline-flex;align-items:center;gap:.375rem;&:after{content:"";flex:0 0 auto;display:inline-block;width:var(--ful-spinner-icon-width);height:var(--ful-spinner-icon-height);border-radius:50%;border:var(--ful-spinner-icon-border-width) solid var(--ful-spinner-icon-color);border-right-color:transparent;animation:var(--ful-spinner-icon-animation-speed) linear infinite var(--ful-spinner-icon-animation-name)}@media (prefers-reduced-motion:reduce){&:after{animation:none}}&.centered{display:flex;align-items:center;justify-content:center}&.big{--ful-spinner-icon-width:2rem;--ful-spinner-icon-height:2rem;--ful-spinner-icon-border-width:0.25rem}&.bigger{--ful-spinner-icon-width:4rem;--ful-spinner-icon-height:4rem;--ful-spinner-icon-border-width:0.5rem}&.backdrop{--ful-spinner-icon-width:4rem;--ful-spinner-icon-height:4rem;--ful-spinner-icon-border-width:0.5rem;z-index:2000;position:fixed;inset:0;display:grid;place-items:center;background-color:hsla(0,0%,65.5%,.8);&:before{content:"";width:calc(4rem + var(--ful-spinner-icon-width));height:calc(4rem + var(--ful-spinner-icon-height));background-color:var(--ful-bg);border-radius:1rem}&:after,&:before{grid-area:1/1}}}body:has(ful-spinner.backdrop:not([hidden])){overflow:hidden}@keyframes spinner-border{to{transform:rotate(1turn)}}}
 @layer ful.components{:has(>ful-table-wrapper){display:block;& th{text-align:start}&[aria-busy=true] tbody:not([data-ref]){opacity:.6;pointer-events:none}& tbody[data-ref=feedback],& tbody[data-ref=initial],& tbody[data-ref=loading]{height:360px;padding:1.5rem;& td{& p{margin-top:1rem}}}}ful-sorter{display:block;&:not(:state(rendered)){visibility:hidden}cursor:pointer;&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}}
 @layer ful.components{ful-affix:has(>button[data-ref=operator],>button[data-ref=sensitivity]){min-width:4rem;&>button[data-ref=operator]{min-width:4rem}&>button[data-ref=sensitivity]{min-width:2.5rem}&>button[data-ref=operator]:hover,&>button[data-ref=sensitivity]:hover{color:var(--ful-active-color);background-color:var(--ful-active-bg)}&>button[data-ref=operator]:focus,&>button[data-ref=sensitivity]:focus{outline:0}&>button[data-ref=operator]:focus-visible,&>button[data-ref=sensitivity]:focus-visible{background-color:color-mix(in srgb,var(--ful-active-bg) 20%,transparent)}&>button[data-ref=operator]:disabled,&>button[data-ref=sensitivity]:disabled{cursor:default;opacity:.5}}ful-control-group>ful-control>input{flex:1 1 auto;width:1%;min-width:0;min-height:var(--ful-controls-height);padding:.375rem .75rem;font:inherit;line-height:1.5;color:var(--ful-color);background-color:transparent;border:0;border-radius:0}ful-control-group>ful-control>input:focus{outline:0}ful-control-group>button[data-ref=value]{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;padding:.375rem 2rem .375rem .75rem;font-size:inherit;font-family:inherit;line-height:1.5;color:var(--ful-color);white-space:nowrap;text-align:left;background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23343a40%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m2%205%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:16px 12px;border:0;border-radius:0;cursor:pointer}ful-control-group>button[data-ref=value]:focus{outline:0}ful-control-group>button[data-ref=value]:disabled{cursor:default;opacity:.5;background-size:0}ful-affix:has(>button[data-ref=operator],>button[data-ref=sensitivity])>ul[popover],ful-control-group>button[data-ref=value]+ul[popover]{top:anchor(bottom);left:anchor(left);margin:.3rem 0 0;min-width:6rem;padding:.5rem 0;list-style:none;color:var(--ful-color);background-color:var(--ful-bg);background-clip:padding-box;border:var(--ful-border-width) solid var(--ful-border-color);border-radius:var(--ful-border-radius);&:popover-open{display:block}&>li>a{display:flex;align-items:center;gap:.5rem;padding:.25rem 1rem;color:var(--ful-color);text-decoration:none;cursor:pointer;&>span:first-child{flex:0 0 2.25em;text-align:center}}&>li>a[aria-checked=true]{background-color:color-mix(in srgb,var(--ful-active-bg) 12%,transparent);box-shadow:inset .2rem 0 0 var(--ful-active-bg)}&>li>a:hover{background-color:var(--ful-selected-bg)}&>li>a:focus-visible{background-color:var(--ful-selected-bg);outline:0}&>li>a:active{color:var(--ful-active-color);background-color:var(--ful-active-bg)}}}
-@layer ful.components{.ful-tip,button:has(+ful-note){display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font:inherit;position:relative;top:calc(.5ex - .5cap);width:1.5rem;height:1.5rem;padding:0;border:0;border-radius:50%;background:none;color:var(--ful-muted-color,var(--ful-color));cursor:pointer;& ful-icon{width:1rem;height:1rem}&:hover{color:var(--ful-accent-ink);background-color:color-mix(in srgb,var(--ful-active-bg) 12%,transparent)}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}.ful-note,ful-note{--ful-note-gap:0.5rem;--ful-note-callout-size:0.5rem;--ful-note-callout-edge:calc(var(--ful-border-radius) + var(--ful-note-callout-size));display:none;max-width:20rem;padding:.5rem .75rem;color:var(--ful-color);background-color:var(--ful-bg);background-clip:padding-box;border:var(--ful-border-width) solid var(--ful-border-color);border-radius:var(--ful-border-radius);font-size:.875rem;font-weight:400;font-style:normal;text-align:start;margin:var(--ful-note-gap) 0 0;&:popover-open{display:block;overflow:visible}&:popover-open:after{content:"";position:absolute;width:var(--ful-note-callout-size);height:var(--ful-note-callout-size);background-color:inherit;border:0 solid var(--ful-border-color);rotate:45deg}&:popover-open:after{top:calc(-.5 * var(--ful-note-callout-size) - .5 * var(--ful-border-width));left:clamp(var(--ful-note-callout-edge),var(--ful-note-callout-inline,50%),100% - var(--ful-note-callout-edge));translate:-50% 0;border-block-start-width:var(--ful-border-width);border-inline-start-width:var(--ful-border-width)}&[placement=top]:popover-open{margin:0 0 var(--ful-note-gap);&:after{top:auto;bottom:calc(-.5 * var(--ful-note-callout-size) - .5 * var(--ful-border-width));border-block-start-width:0;border-inline-start-width:0;border-block-end-width:var(--ful-border-width);border-inline-end-width:var(--ful-border-width)}}&[placement=right]:popover-open{margin:0 0 0 var(--ful-note-gap);&:after{top:clamp(var(--ful-note-callout-edge),var(--ful-note-callout-block,50%),100% - var(--ful-note-callout-edge));left:calc(-.5 * var(--ful-note-callout-size) - .5 * var(--ful-border-width));translate:0 -50%;border-block-start-width:0;border-inline-start-width:var(--ful-border-width);border-block-end-width:var(--ful-border-width)}}&[placement=left]:popover-open{margin:0 var(--ful-note-gap) 0 0;&:after{top:clamp(var(--ful-note-callout-edge),var(--ful-note-callout-block,50%),100% - var(--ful-note-callout-edge));left:auto;right:calc(-.5 * var(--ful-note-callout-size) - .5 * var(--ful-border-width));translate:0 -50%;border-block-start-width:var(--ful-border-width);border-inline-end-width:var(--ful-border-width);border-inline-start-width:0}}}dialog.ful-dialog{--ful-dialog-width:min(90vw, 32rem);width:var(--ful-dialog-width);padding:0;border:var(--ful-border-width) solid var(--ful-border-color);border-radius:var(--ful-border-radius);background-color:var(--ful-bg);color:var(--ful-color);&::backdrop{background-color:var(--ful-backdrop-color)}& .ful-dialog-header,&>header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 1.25rem .5rem;& h2{margin:0;font-size:1.125rem}&>button[data-ref=close]{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:0;border-radius:var(--ful-border-radius);background:none;color:var(--ful-muted-color,var(--ful-color));cursor:pointer;& ful-icon{width:1em;height:1em}&:hover{color:var(--ful-active-color);background-color:var(--ful-active-bg)}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}&>button[data-ref=close]:only-child{margin-inline-start:auto}}& .ful-dialog-body,&>[data-ref=body]{padding:.5rem 1.25rem}& .ful-dialog-footer,&>footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.5rem 1.25rem 1rem;&>button:not(.ful-button){padding:.375rem .75rem;height:var(--ful-controls-height);border:var(--ful-controls-border-width) solid var(--ful-controls-border-color);border-radius:var(--ful-controls-border-radius);background-color:var(--ful-selected-bg);color:var(--ful-color);cursor:pointer;&:hover{background-color:var(--ful-active-bg);color:var(--ful-active-color)}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}}}}
+@layer ful.components{.ful-tip,button:has(+ful-note){display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font:inherit;position:relative;top:calc(.5ex - .5cap);width:1.5rem;height:1.5rem;padding:0;border:0;border-radius:50%;background:none;color:var(--ful-muted-color,var(--ful-color));cursor:pointer;& ful-icon{width:1rem;height:1rem}&:hover{color:var(--ful-accent-ink);background-color:color-mix(in srgb,var(--ful-active-bg) 12%,transparent)}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}.ful-note,ful-note{--ful-note-gap:0.5rem;--ful-note-callout-size:0.5rem;--ful-note-callout-edge:calc(var(--ful-border-radius) + var(--ful-note-callout-size));display:none;max-width:20rem;padding:.5rem .75rem;color:var(--ful-color);background-color:var(--ful-bg);background-clip:padding-box;border:var(--ful-border-width) solid var(--ful-border-color);border-radius:var(--ful-border-radius);font-size:.875rem;font-weight:400;font-style:normal;text-align:start;margin:var(--ful-note-gap) 0 0;&:popover-open{display:block;overflow:visible}&:popover-open:after{content:"";position:absolute;width:var(--ful-note-callout-size);height:var(--ful-note-callout-size);background-color:inherit;border:0 solid var(--ful-border-color);rotate:45deg}&:popover-open:after{top:calc(-.5 * var(--ful-note-callout-size) - .5 * var(--ful-border-width));left:clamp(var(--ful-note-callout-edge),var(--ful-note-callout-inline,50%),100% - var(--ful-note-callout-edge));translate:-50% 0;border-block-start-width:var(--ful-border-width);border-inline-start-width:var(--ful-border-width)}&[placement=top]:popover-open{margin:0 0 var(--ful-note-gap);&:after{top:auto;bottom:calc(-.5 * var(--ful-note-callout-size) - .5 * var(--ful-border-width));border-block-start-width:0;border-inline-start-width:0;border-block-end-width:var(--ful-border-width);border-inline-end-width:var(--ful-border-width)}}&[placement=right]:popover-open{margin:0 0 0 var(--ful-note-gap);&:after{top:clamp(var(--ful-note-callout-edge),var(--ful-note-callout-block,50%),100% - var(--ful-note-callout-edge));left:calc(-.5 * var(--ful-note-callout-size) - .5 * var(--ful-border-width));translate:0 -50%;border-block-start-width:0;border-inline-start-width:var(--ful-border-width);border-block-end-width:var(--ful-border-width)}}&[placement=left]:popover-open{margin:0 var(--ful-note-gap) 0 0;&:after{top:clamp(var(--ful-note-callout-edge),var(--ful-note-callout-block,50%),100% - var(--ful-note-callout-edge));left:auto;right:calc(-.5 * var(--ful-note-callout-size) - .5 * var(--ful-border-width));translate:0 -50%;border-block-start-width:var(--ful-border-width);border-inline-end-width:var(--ful-border-width);border-inline-start-width:0}}}dialog.ful-dialog{--ful-dialog-width:min(90vw, 32rem);width:var(--ful-dialog-width);padding:0;border:var(--ful-border-width) solid var(--ful-border-color);border-radius:var(--ful-border-radius);background-color:var(--ful-bg);color:var(--ful-color);&::backdrop{background-color:var(--ful-backdrop-color)}& .ful-dialog-header,&>header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 1.25rem .5rem;& h2{margin:0;font-size:1.125rem}&>button[data-ref=close]{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:0;border-radius:var(--ful-border-radius);background:none;color:var(--ful-muted-color,var(--ful-color));cursor:pointer;& ful-icon{width:1em;height:1em}&:hover{color:var(--ful-active-color);background-color:var(--ful-active-bg)}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}&>button[data-ref=close]:only-child{margin-inline-start:auto}}& .ful-dialog-body,&>[data-ref=body]{padding:.5rem 1.25rem}&>[data-ref=loading]{display:grid;place-items:center;padding:2rem 1.25rem}&>[data-ref=error]{margin:.5rem 1.25rem;padding:1rem;white-space:pre-line;color:var(--ful-error-color);background-color:var(--ful-error-bg);border:var(--ful-border-width) solid var(--ful-error-border-color);border-radius:var(--ful-border-radius)}& .ful-dialog-footer,&>footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.5rem 1.25rem 1rem;&>button:not(.ful-button){padding:.375rem .75rem;height:var(--ful-controls-height);border:var(--ful-controls-border-width) solid var(--ful-controls-border-color);border-radius:var(--ful-controls-border-radius);background-color:var(--ful-selected-bg);color:var(--ful-color);cursor:pointer;&:hover{background-color:var(--ful-active-bg);color:var(--ful-active-color)}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}}}}
 @layer ful.components{dialog.ful-drawer{--ful-drawer-width:min(90vw, 28rem);@media (max-width:30rem){--ful-drawer-width:100vw;border-radius:0}position:fixed;inset-block:0;inset-inline-start:auto;inset-inline-end:0;width:var(--ful-drawer-width);max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:var(--ful-border-width) solid var(--ful-border-color);border-start-start-radius:var(--ful-border-radius);border-end-start-radius:var(--ful-border-radius);background-color:var(--ful-bg);color:var(--ful-color);&::backdrop{background-color:var(--ful-backdrop-color)}&[open]{display:flex;flex-direction:column;animation:ful-drawer-slide-in .2s ease-out}&>header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 1.25rem .5rem;& h2{margin:0;font-size:1.125rem}&>button{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:0;border-radius:var(--ful-border-radius);background:none;color:var(--ful-muted-color,var(--ful-color));cursor:pointer;& ful-icon{width:1em;height:1em}&:hover{color:var(--ful-active-color);background-color:var(--ful-active-bg)}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}}&>section{padding:.5rem 1.25rem 1rem;overflow-y:auto;&[data-ref=content]{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;&>footer:last-child{margin-block-start:auto}}&[data-ref=loading]{display:grid;place-items:center;flex-grow:1}&[data-ref=error]{margin:0 1.25rem;padding:1rem;white-space:pre-line;color:var(--ful-error-color);background-color:var(--ful-error-bg);border:var(--ful-border-width) solid var(--ful-error-border-color);border-radius:var(--ful-border-radius)}}&[placement=start]{inset-inline-end:auto;inset-inline-start:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--ful-border-radius);border-end-end-radius:var(--ful-border-radius);&[open]{animation-name:ful-drawer-slide-in-start}}&:dir(rtl)[open]{animation-name:ful-drawer-slide-in-start}&[placement=start]:dir(rtl)[open]{animation-name:ful-drawer-slide-in}}@keyframes ful-drawer-slide-in{0%{transform:translateX(1rem);opacity:0}}@keyframes ful-drawer-slide-in-start{0%{transform:translateX(-1rem);opacity:0}}@media (prefers-reduced-motion:reduce){dialog.ful-drawer[open]{animation:none}}}
 @layer ful.components{ful-toasts:not(:has(>ful-toast)){display:none}:has(>ful-toast){--ful-toasts-max-width:min(90vw, 24rem);position:fixed;top:1rem;inset-inline-end:1rem;z-index:1200;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;max-width:var(--ful-toasts-max-width);&>ful-toast{display:flex;align-items:flex-start;gap:.5rem;padding:.625rem .75rem;border:var(--ful-controls-border-width) solid var(--ful-border-color);border-radius:var(--ful-controls-border-radius);background-color:var(--ful-bg);color:var(--ful-color);white-space:pre-line;animation:ful-toast-in .2s ease-out;&>div:first-child{flex-grow:1}&>button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.25rem;height:1.25rem;padding:0;border:0;border-radius:var(--ful-border-radius);background:none;color:inherit;cursor:pointer;& ful-icon{width:1em;height:1em}&:hover{color:var(--ful-active-color);background-color:var(--ful-active-bg)}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}&.success{border-color:var(--ful-accent-ink);color:var(--ful-accent-ink)}&.warning{border-color:var(--ful-warning-border-color);background-color:var(--ful-warning-bg);color:var(--ful-warning-color)}&.error{border-color:var(--ful-error-border-color);background-color:var(--ful-error-bg);color:var(--ful-error-color)}&.ful-toast-out{animation:ful-toast-out .2s ease-in forwards}}}@keyframes ful-toast-in{0%{transform:translateY(-.5rem);opacity:0}}@keyframes ful-toast-out{to{transform:translateY(-.5rem);opacity:0}}}
 @layer ful.components{:has(>ful-tablist){display:block;&>[role=tabpanel]{padding-block-start:1rem}}ful-tablist{display:flex;flex-wrap:wrap;gap:.25rem;border-block-end:var(--ful-border-width) solid var(--ful-border-color);&>button{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:var(--ful-controls-height);padding:.375rem .75rem;font:inherit;line-height:1.5;color:var(--ful-muted-color,var(--ful-color));background:none;border:var(--ful-border-width) solid transparent;border-start-start-radius:var(--ful-border-radius);border-start-end-radius:var(--ful-border-radius);cursor:pointer;&:hover{color:var(--ful-color);background-color:var(--ful-selected-bg)}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}&[aria-selected=true]{color:var(--ful-color);background-color:var(--ful-bg);border-color:var(--ful-border-color) var(--ful-border-color) transparent;font-weight:600}}}}