@optionfactory/fml 9.0.0-rc14 → 9.0.0-rc15

package/dist/custom-elements.json

@@ -159,6 +159,24 @@
             }
           ]
         },
+        {
+          "kind": "class",
+          "name": "Menu",
+          "tagName": "ful-menu",
+          "customElement": true,
+          "description": "A menu of commands on the native popover platform: the invoker named by for toggles it, light dismiss and Escape come from the browser, and the element adds the menu semantics and the keyboard protocol (roving focus with the arrows, Home and End, type-ahead, Enter and Space to activate, Escape and every close handing the focus back to the invoker). The items are the buttons and links written inside it, kept as they are and given their menuitem role; activation is the item's own click, which the menu only follows by closing.",
+          "attributes": [
+            {
+              "name": "for",
+              "description": "The id of the invoker the menu belongs to: it toggles the menu, carries aria-haspopup and aria-expanded, and takes the focus back when the menu closes. Read once at the upgrade, so the invoker must already be in the page by then.",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "slots": [],
+          "events": []
+        },
         {
           "kind": "class",
           "name": "Toasts",
@@ -2516,6 +2534,14 @@
             "module": "dist/fml.mjs"
           }
         },
+        {
+          "kind": "custom-element-definition",
+          "name": "ful-menu",
+          "declaration": {
+            "name": "Menu",
+            "module": "dist/fml.mjs"
+          }
+        },
         {
           "kind": "custom-element-definition",
           "name": "ful-toasts",

package/dist/fml.css

@@ -15,6 +15,7 @@
 @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-affix:has(>button[hidden]){display:none}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;&>:first-child{margin-block-start:0}&>:last-child{margin-block-end: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;margin-inline-end:auto}&>:not(h2,button[data-ref=close]){flex:0 0 auto}&>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)}&>footer.ful-dialog-footer:empty{display:none}& .ful-dialog-body :is(.ful-dialog-header,.ful-dialog-footer){padding-inline:0}& .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;&[closing]{animation:ful-drawer-slide-out .2s ease-in forwards}}&>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;&[closing]{animation-name:ful-drawer-slide-out-start}}}&:dir(rtl)[open]{animation-name:ful-drawer-slide-in-start;&[closing]{animation-name:ful-drawer-slide-out-start}}&[placement=start]:dir(rtl)[open]{animation-name:ful-drawer-slide-in;&[closing]{animation-name:ful-drawer-slide-out}}}@keyframes ful-drawer-slide-in{0%{transform:translateX(1rem);opacity:0}}@keyframes ful-drawer-slide-in-start{0%{transform:translateX(-1rem);opacity:0}}@keyframes ful-drawer-slide-out{to{transform:translateX(1rem);opacity:0}}@keyframes ful-drawer-slide-out-start{to{transform:translateX(-1rem);opacity:0}}@media (prefers-reduced-motion:reduce){dialog.ful-drawer[open]{animation:none}}}
+@layer ful.components{ful-menu[popover]{top:anchor(bottom);left:anchor(left);margin:.3rem 0 0;min-width:8rem;padding:.5rem 0;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}&>a,&>button{display:flex;align-items:center;gap:.5rem;width:100%;padding:.25rem 1rem;font:inherit;color:var(--ful-color);text-align:start;text-decoration:none;cursor:pointer;background:none;border:0}&>a:focus,&>a:hover,&>button:focus,&>button:hover{background-color:var(--ful-selected-bg);outline:0}&>a:active,&>button:active{color:var(--ful-active-color);background-color:var(--ful-active-bg)}&>button:disabled{cursor:default;opacity:.5;background:none}&>hr{margin:.5rem 0;border:0;border-top:var(--ful-border-width) solid var(--ful-border-color)}}}
 @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)}}&>button.ful-toast-action{width:auto;align-self:center;padding:0 .375rem;font-weight:600;color:var(--ful-accent-ink)}&.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}}}}
 @layer ful.components{:has(>ful-accordion-group){display:block}ful-accordion-group{display:block;&>details{color:var(--ful-color);background-color:var(--ful-bg);border:var(--ful-border-width) solid var(--ful-border-color);border-radius:var(--ful-border-radius);&+details{margin-top:.5rem}&:has(>summary:focus-visible){border-color:var(--ful-focus-border-color);box-shadow:var(--ful-focus-box-shadow)}&>summary{display:flex;align-items:center;gap:.5rem;min-height:var(--ful-controls-height);padding:.375rem .75rem;font:inherit;line-height:1.5;cursor:pointer;list-style:none;outline:0;&::-webkit-details-marker{display:none}&:after{content:"";margin-inline-start:auto;flex:0 0 auto;width:1em;height:1em;background-color:currentcolor;mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');mask-repeat:no-repeat;mask-position:center;mask-size:contain;transition:rotate .2s ease-out;@media (prefers-reduced-motion:reduce){transition:none}}}&[open]>summary:after{rotate:180deg}&>:not(summary){padding:.5rem .75rem .75rem}}}}