@optionfactory/fml 9.0.0-rc11 → 9.0.0-rc13

package/README.md

@@ -106,4 +106,4 @@ One storage note, since caching outlives a session: `ful-select` caches a fetche
 
 ## Documentation
 
-[Check the documentation](https://github.com/optionfactory/fml/wiki) in the wiki.
+[Check the documentation](https://github.com/optionfactory/fml/wiki) in the wiki. The choices that constrain the whole library are written down in [docs/decisions](docs/decisions/README.md).

package/dist/custom-elements.json

@@ -492,6 +492,13 @@
                 "text": "boolean"
               }
             },
+            {
+              "name": "unsigned",
+              "description": "Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "name": "autocomplete",
               "description": "The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form=\"\", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.",
@@ -612,6 +619,13 @@
                 "text": "boolean"
               }
             },
+            {
+              "name": "unsigned",
+              "description": "Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "name": "autocomplete",
               "description": "The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form=\"\", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.",
@@ -835,6 +849,13 @@
                 "text": "boolean"
               }
             },
+            {
+              "name": "unsigned",
+              "description": "Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "name": "autocomplete",
               "description": "The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form=\"\", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.",
@@ -976,6 +997,13 @@
                 "text": "boolean"
               }
             },
+            {
+              "name": "unsigned",
+              "description": "Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "name": "autocomplete",
               "description": "The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form=\"\", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.",
@@ -1117,6 +1145,13 @@
                 "text": "boolean"
               }
             },
+            {
+              "name": "unsigned",
+              "description": "Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "name": "autocomplete",
               "description": "The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form=\"\", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.",
@@ -1469,6 +1504,13 @@
                 "text": "boolean"
               }
             },
+            {
+              "name": "unsigned",
+              "description": "Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "name": "autocomplete",
               "description": "The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form=\"\", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.",
@@ -1596,6 +1638,13 @@
                 "text": "boolean"
               }
             },
+            {
+              "name": "unsigned",
+              "description": "Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "name": "autocomplete",
               "description": "The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form=\"\", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.",
@@ -1723,6 +1772,13 @@
                 "text": "boolean"
               }
             },
+            {
+              "name": "unsigned",
+              "description": "Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "name": "autocomplete",
               "description": "The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form=\"\", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.",
@@ -1921,6 +1977,13 @@
                 "text": "boolean"
               }
             },
+            {
+              "name": "unsigned",
+              "description": "Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "name": "autocomplete",
               "description": "The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form=\"\", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.",
@@ -2011,7 +2074,7 @@
           "name": "InFilter",
           "tagName": "ful-filter-in",
           "customElement": true,
-          "description": "A ful-table filter over set membership, answering for both of data-jpa's set annotations: InEnum and InList take the same array of values and no operator, differing only in what the server converts them to. The vocabulary comes from wherever a select's does, slotted options or a loader, and the selection is always multiple, an empty one contributing nothing rather than an empty array.",
+          "description": "A ful-table filter over set membership, answering for both of data-jpa's set annotations: InEnum and InList take the same array of values and no operator, differing only in what the server converts them to. The vocabulary comes from wherever a select's does, slotted options or a loader, and the value is an array whether one key was chosen or several, an empty selection contributing nothing rather than an empty array. It picks one key unless multiple is declared, as a ful-select does.",
           "attributes": [
             {
               "name": "name",
@@ -2104,6 +2167,13 @@
                 "text": "string"
               }
             },
+            {
+              "name": "operator",
+              "description": "A fixed operator sent in front of the chosen keys, for the field a compare reads rather than a set: absent the value is the bare array an InEnum or an InList takes, present it is [operator, ...keys]. No menu is rendered either way, the operator being the author naming the server's comparison rather than a choice offered to whoever is filtering. The criterion reports it, so a chip can show it.",
+              "type": {
+                "text": "string"
+              }
+            },
             {
               "name": "disabled",
               "description": "The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.",

package/dist/fml.css

@@ -4,11 +4,11 @@
 @layer ful.components{.ful-button{--ful-button-height:var(--ful-controls-height);--ful-button-border-width:var(--ful-controls-border-width);--ful-button-border-radius:var(--ful-controls-border-radius);--ful-button-color:var(--ful-active-color);--ful-button-bg:var(--ful-active-bg);--ful-button-border-color:var(--ful-button-bg);--ful-button-hover-bg:color-mix(in srgb, var(--ful-active-bg) 85%, #000);--ful-button-hover-color:var(--ful-button-color);display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:var(--ful-button-height);padding:.375rem .75rem;font:inherit;line-height:1.5;text-decoration:none;color:var(--ful-button-color);background-color:var(--ful-button-bg);border:var(--ful-button-border-width) solid var(--ful-button-border-color);border-radius:var(--ful-button-border-radius);cursor:pointer;&:hover{color:var(--ful-button-hover-color);background-color:var(--ful-button-hover-bg)}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}&:disabled,&[aria-disabled=true]{opacity:.5;pointer-events:none}&.ghost{--ful-button-color:var(--ful-accent-ink);--ful-button-bg:transparent;--ful-button-border-color:var(--ful-accent-ink)}&.ghost,&.soft{--ful-button-hover-color:var(--ful-active-color);--ful-button-hover-bg:var(--ful-active-bg)}&.soft{--ful-button-color:var(--ful-color);--ful-button-bg:var(--ful-selected-bg);--ful-button-border-color:var(--ful-controls-border-color)}&.small{--ful-button-height:calc(1.25em + .5rem + 2px);padding:.25rem .5rem;font-size:.875rem}}}
 @layer ful.components{:is(ful-tabs,ful-wizard,ful-dialog,ful-drawer){& [loading=""]{position:relative}& [loading=""]:after{content:"";position:absolute;inset:0;margin:auto;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-inline-end-color:transparent;animation:var(--ful-spinner-icon-animation-speed) linear infinite var(--ful-spinner-icon-animation-name);@media (prefers-reduced-motion:reduce){animation:none}}& .ful-section-error{margin-bottom:1rem;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)}}}
 @layer ful.components{:is(ful-input,.ful-input,ful-input-file,ful-input-local-date,ful-input-local-time,ful-input-instant,ful-checkbox,ful-radio-group,ful-select,ful-filter-text,ful-filter-number,ful-filter-boolean,ful-filter-local-date,ful-filter-instant,ful-filter-in,ful-tabs,ful-wizard,ful-tooltip,ful-dialog,ful-drawer,ful-table,ful-pagination):not(:state(rendered)){visibility:hidden}}
-@layer ful.components{:has(>ful-control-group>input,>ful-control-group>textarea){&[uppercase] input,&[uppercase] textarea{text-transform:uppercase}}ful-item-list{--ful-item-list-item-color:var(--ful-active-color);--ful-item-list-item-border-radius:var(--ful-border-radius);--ful-item-list-item-bg:var(--ful-active-bg);display:grid;gap:.5rem;&>ful-item:first-child{margin-top:.5rem}&>ful-item:last-child{margin-bottom:.5rem}&>ful-item>div{display:flex;align-items:center;gap:.5rem;min-width:0;min-height:calc(var(--ful-controls-height) + 2 * var(--ful-controls-border-width));padding:5px .25rem 5px .5rem;color:var(--ful-item-list-item-color);border-radius:var(--ful-item-list-item-border-radius);background-color:var(--ful-item-list-item-bg);&:has(:focus-visible){outline:2px solid var(--ful-active-bg);outline-offset:2px}&>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}&>span+span{flex:0 0 auto;font-size:.875em;opacity:.75}&>button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:calc(-.625rem + var(--ful-controls-height));height:calc(-.625rem + var(--ful-controls-height));padding:0;font-size:inherit;font-family:inherit;color:inherit;background-color:transparent;border:0;border-radius:calc(-.1875rem + var(--ful-item-list-item-border-radius));cursor:pointer;& ful-icon{width:1em;height:1em}&:hover{background-color:color-mix(in srgb,var(--ful-invalid-color) 25%,transparent)}&:focus-visible{outline:0}}}}}
-@layer ful.components{:has(>ful-control-group>input[type=file]){&>ful-control-group>input[type=file]{padding-left:0}&>ful-control-group>input[type=file]::file-selector-button{margin:-.375rem .75rem -.375rem 0;padding:.375rem .75rem;height:var(--ful-controls-height);font-size:inherit;font-family:inherit;line-height:1.5;color:var(--ful-color);background-color:var(--ful-selected-bg);border:0;cursor:pointer}&>ful-control-group>input[type=file]:first-child::file-selector-button{border-start-start-radius:calc(var(--ful-controls-border-radius) - var(--ful-controls-border-width));border-end-start-radius:calc(var(--ful-controls-border-radius) - var(--ful-controls-border-width))}&>ful-control-group>input[type=file]::file-selector-button:hover{color:var(--ful-active-color);background-color:var(--ful-active-bg)}&>ful-control-group>input[type=file]:focus::file-selector-button{outline:0}&[readonly]>ful-control-group>input[type=file]::file-selector-button{display:none}&[readonly]>ful-control-group>input[type=file]{padding-left:.75rem}&:disabled>ful-control-group>input[type=file]::file-selector-button{opacity:.5;cursor:default}&>.default-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-height:100px;margin-top:.5rem;padding:1.5rem;color:var(--ful-color);text-align:center;background-color:var(--ful-bg);border:var(--ful-controls-border-width) dashed var(--ful-controls-border-color);border-radius:var(--ful-controls-border-radius)}&>.default-dropzone,&>.dropzone{cursor:pointer}&>.default-dropzone:hover{border-color:var(--ful-focus-border-color);box-shadow:var(--ful-focus-box-shadow)}&[dragover]>.default-dropzone{color:var(--ful-active-color);background-color:var(--ful-active-bg);border-color:var(--ful-active-bg);box-shadow:none}&:disabled>.default-dropzone,&:disabled>.dropzone,&:not([dropzone])>.default-dropzone,&:not([dropzone])>.dropzone,&:not([item-list])>ful-item-list,&[noinput]>ful-control-group,&[readonly]>.default-dropzone,&[readonly]>.dropzone{display:none}&[readonly]{&>ful-control-group>input,&>ful-item-list{pointer-events:none}}&:disabled>ful-item-list{pointer-events:none}&[item-list][readonly]{&>ful-control-group{display:none}&>ful-item-list>ful-item:first-child{margin-top:0}&>ful-item-list>ful-item:last-child{margin-bottom:0}}&:disabled>ful-item-list ful-item button,&[readonly]>ful-item-list ful-item button{display:none}&:disabled>ful-item-list>ful-item>div,&[readonly]>ful-item-list>ful-item>div{padding-right:.5rem}}}
-@layer ful.components{:has(>ful-control-group>ful-dropdown){cursor:pointer;&:not([item-list])>ful-item-list,&[item-list] ful-control-group ful-badge{display:none}&>ful-control-group>ful-control{cursor:pointer;padding-left:5px;padding-right:2.25rem;overflow:hidden;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;&>ful-badge+ful-badge{margin-left:3px}}&[item-list][readonly]{&>ful-control-group{display:none}&>ful-item-list>ful-item:first-child{margin-top:0}&>ful-item-list>ful-item:last-child{margin-bottom:0}}&:disabled>ful-item-list button,&[readonly]>ful-item-list button{display:none}&:disabled>ful-item-list>ful-item>div,&[readonly]>ful-item-list>ful-item>div{padding-right:.5rem}&:disabled,&[readonly]{cursor:default}&:disabled>ful-control-group>ful-control,&[readonly]>ful-control-group>ful-control{background-size:0;cursor:default;padding-right:5px}&>ful-control-group>ful-control>input{flex:1 1 auto;width:1em;min-width:1em;margin:0;padding:.375rem 0 .375rem 7px;font-size:inherit;font-family:inherit;line-height:1.5;color:var(--ful-color);background-color:transparent;border:0;outline:0}}ful-dropdown{--ful-dropdown-color:var(--ful-color);--ful-dropdown-selected-bg:var(--ful-selected-bg);--ful-dropdown-active-bg:var(--ful-active-bg);--ful-dropdown-border-width:var(--ful-border-width);--ful-dropdown-border-radius:var(--ful-border-radius);--ful-dropdown-border-color:var(--ful-border-color);--ful-dropdown-background-color:var(--ful-bg);--ful-dropdown-scrollbar-width:var(--ful-scrollbar-width);--ful-dropdown-scrollbar-border-width:var(--ful-scrollbar-border-width);--ful-dropdown-scrollbar-bg:var(--ful-scrollbar-bg);--ful-dropdown-scrollbar-thumb-bg:var(--ful-scrollbar-thumb-bg);padding:.5rem 0;margin:.3rem 0 0;background-color:var(--ful-dropdown-background-color);background-clip:padding-box;border:var(--ful-dropdown-border-width) solid var(--ful-dropdown-border-color);border-radius:var(--ful-dropdown-border-radius);&:popover-open{display:block;top:anchor(bottom);left:anchor(left);width:anchor-size(width)}ful-empty{padding:.5rem .75rem;color:var(--ful-dropdown-color);text-align:start}menu{height:auto;max-height:200px;overflow-y:auto;padding:0;margin:0;&::-webkit-scrollbar{width:12px}&::-webkit-scrollbar-track{background-color:var(--ful-dropdown-scrollbar-bg);border-radius:var(--ful-dropdown-scrollbar-width)}&::-webkit-scrollbar-thumb{border-radius:var(--ful-dropdown-scrollbar-width);background-color:var(--ful-dropdown-active-bg);border:var(--ful-dropdown-scrollbar-border-width) solid var(--ful-dropdown-scrollbar-bg)}}li{padding:.5rem .751rem;display:block;border:0;cursor:pointer}li,li:hover,li[selected]{color:var(--ful-dropdown-color)}li:hover,li[selected]{background-color:var(--ful-dropdown-selected-bg)}li[picked]{background-color:color-mix(in srgb,var(--ful-dropdown-active-bg) 12%,transparent);box-shadow:inset .2rem 0 0 var(--ful-dropdown-active-bg)}li:active{color:#fff;background-color:var(--ful-dropdown-active-bg)}}}
+@layer ful.components{:has(>ful-control-group>input,>ful-control-group>textarea){&[uppercase] input,&[uppercase] textarea{text-transform:uppercase}}:has(>ful-item-list):is([readonly],:disabled){&>ful-item-list button{display:none}&>ful-item-list>ful-item>div{padding-right:.5rem}}ful-item-list{--ful-item-list-item-color:var(--ful-active-color);--ful-item-list-item-border-radius:var(--ful-border-radius);--ful-item-list-item-bg:var(--ful-active-bg);display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;&>ful-item:first-child{margin-top:.5rem}&>ful-item:last-child{margin-bottom:.5rem}&>ful-item>div{display:flex;align-items:center;gap:.5rem;min-width:0;min-height:calc(var(--ful-controls-height) + 2 * var(--ful-controls-border-width));padding:5px .25rem 5px .5rem;color:var(--ful-item-list-item-color);border-radius:var(--ful-item-list-item-border-radius);background-color:var(--ful-item-list-item-bg);&:has(:focus-visible){outline:2px solid var(--ful-active-bg);outline-offset:2px}&>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}&>span+span{flex:0 0 auto;font-size:.875em;opacity:.75}&>button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:calc(-.625rem + var(--ful-controls-height));height:calc(-.625rem + var(--ful-controls-height));padding:0;font-size:inherit;font-family:inherit;color:inherit;background-color:transparent;border:0;border-radius:calc(-.1875rem + var(--ful-item-list-item-border-radius));cursor:pointer;& ful-icon{width:1em;height:1em}&:hover{background-color:color-mix(in srgb,var(--ful-invalid-color) 25%,transparent)}&:focus-visible{outline:0}}}}}
+@layer ful.components{:has(>ful-control-group>input[type=file]){&>ful-control-group>input[type=file]{padding-left:0}&>ful-control-group>input[type=file]::file-selector-button{margin:-.375rem .75rem -.375rem 0;padding:.375rem .75rem;height:var(--ful-controls-height);font-size:inherit;font-family:inherit;line-height:1.5;color:var(--ful-color);background-color:var(--ful-selected-bg);border:0;cursor:pointer}&>ful-control-group>input[type=file]:first-child::file-selector-button{border-start-start-radius:calc(var(--ful-controls-border-radius) - var(--ful-controls-border-width));border-end-start-radius:calc(var(--ful-controls-border-radius) - var(--ful-controls-border-width))}&>ful-control-group>input[type=file]::file-selector-button:hover{color:var(--ful-active-color);background-color:var(--ful-active-bg)}&>ful-control-group>input[type=file]:focus::file-selector-button{outline:0}&[readonly]>ful-control-group>input[type=file]::file-selector-button{display:none}&[readonly]>ful-control-group>input[type=file]{padding-left:.75rem}&:disabled>ful-control-group>input[type=file]::file-selector-button{opacity:.5;cursor:default}&>.default-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-height:100px;margin-top:.5rem;padding:1.5rem;color:var(--ful-color);text-align:center;background-color:var(--ful-bg);border:var(--ful-controls-border-width) dashed var(--ful-controls-border-color);border-radius:var(--ful-controls-border-radius)}&>.default-dropzone,&>.dropzone{cursor:pointer}&>.default-dropzone:hover{border-color:var(--ful-focus-border-color);box-shadow:var(--ful-focus-box-shadow)}&[dragover]>.default-dropzone{color:var(--ful-active-color);background-color:var(--ful-active-bg);border-color:var(--ful-active-bg);box-shadow:none}&:disabled>.default-dropzone,&:disabled>.dropzone,&:not([dropzone])>.default-dropzone,&:not([dropzone])>.dropzone,&:not([item-list])>ful-item-list,&[noinput]>ful-control-group,&[readonly]>.default-dropzone,&[readonly]>.dropzone{display:none}&[readonly]{&>ful-control-group>input,&>ful-item-list{pointer-events:none}}&:disabled>ful-item-list{pointer-events:none}&[item-list][readonly]{&>ful-control-group{display:none}&>ful-item-list>ful-item:first-child{margin-top:0}&>ful-item-list>ful-item:last-child{margin-bottom:0}}}}
+@layer ful.components{:has(>ful-control-group>ful-dropdown){cursor:pointer;&:not([item-list])>ful-item-list,&[item-list] ful-control-group ful-badge{display:none}&>ful-control-group>ful-control{cursor:pointer;padding-left:5px;padding-right:2.25rem;overflow:hidden;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;&>ful-badge+ful-badge{margin-left:3px}}&[item-list][readonly]{&>ful-control-group{display:none}&>ful-item-list>ful-item:first-child{margin-top:0}&>ful-item-list>ful-item:last-child{margin-bottom:0}}&:disabled,&[readonly]{cursor:default}&:disabled>ful-control-group>ful-control,&[readonly]>ful-control-group>ful-control{background-size:0;cursor:default;padding-right:5px}&>ful-control-group>ful-control>input{flex:1 1 auto;width:1em;min-width:1em;margin:0;padding:.375rem 0 .375rem 7px;font-size:inherit;font-family:inherit;line-height:1.5;color:var(--ful-color);background-color:transparent;border:0;outline:0}}ful-dropdown{--ful-dropdown-color:var(--ful-color);--ful-dropdown-selected-bg:var(--ful-selected-bg);--ful-dropdown-active-bg:var(--ful-active-bg);--ful-dropdown-border-width:var(--ful-border-width);--ful-dropdown-border-radius:var(--ful-border-radius);--ful-dropdown-border-color:var(--ful-border-color);--ful-dropdown-background-color:var(--ful-bg);--ful-dropdown-scrollbar-width:var(--ful-scrollbar-width);--ful-dropdown-scrollbar-border-width:var(--ful-scrollbar-border-width);--ful-dropdown-scrollbar-bg:var(--ful-scrollbar-bg);--ful-dropdown-scrollbar-thumb-bg:var(--ful-scrollbar-thumb-bg);padding:.5rem 0;margin:.3rem 0 0;background-color:var(--ful-dropdown-background-color);background-clip:padding-box;border:var(--ful-dropdown-border-width) solid var(--ful-dropdown-border-color);border-radius:var(--ful-dropdown-border-radius);&:popover-open{display:block;top:anchor(bottom);left:anchor(left);width:anchor-size(width)}ful-empty{padding:.5rem .75rem;color:var(--ful-dropdown-color);text-align:start}menu{height:auto;max-height:200px;overflow-y:auto;padding:0;margin:0;&::-webkit-scrollbar{width:12px}&::-webkit-scrollbar-track{background-color:var(--ful-dropdown-scrollbar-bg);border-radius:var(--ful-dropdown-scrollbar-width)}&::-webkit-scrollbar-thumb{border-radius:var(--ful-dropdown-scrollbar-width);background-color:var(--ful-dropdown-active-bg);border:var(--ful-dropdown-scrollbar-border-width) solid var(--ful-dropdown-scrollbar-bg)}}li{padding:.5rem .751rem;display:block;border:0;cursor:pointer}li,li:hover,li[selected]{color:var(--ful-dropdown-color)}li:hover,li[selected]{background-color:var(--ful-dropdown-selected-bg)}li[picked]{background-color:color-mix(in srgb,var(--ful-dropdown-active-bg) 12%,transparent);box-shadow:inset .2rem 0 0 var(--ful-dropdown-active-bg)}li:active{color:#fff;background-color:var(--ful-dropdown-active-bg)}}}
 @layer ful.components{:has(>fieldset>ful-radio-list){--ful-radio-group-label-border-color:var(--ful-border-color);--ful-radio-group-label-bg:inherit;--ful-radio-group-label-checked-border-color:var(--ful-accent-ink);--ful-radio-group-label-checked-bg:light-dark(#eefbfb, var(--ful-selected-bg));--ful-radio-group-label-disabled-border-color:var(--ful-border-color);--ful-radio-group-label-disabled-bg:var(--ful-disabled-bg);--ful-radio-group-active-bg:var(--ful-active-bg);display:block;&[required]>fieldset>legend:before{content:"* ";display:inline;font-weight:700;color:var(--ful-color)}&>fieldset{display:block;min-width:0;width:100%;margin:0;padding:0;border:0;&>legend{font-size:16px;width:100%;padding:0;line-height:inherit}}&.horizontal>fieldset>ful-radio-list{gap:16px;grid-template-columns:1fr 1fr}&:invalid>fieldset>ful-radio-list label{border-color:var(--ful-invalid-border-color)}}ful-radio-list{display:grid;gap:10px;grid-template-columns:1fr;& label{display:flex;align-items:center;border:1px solid var(--ful-radio-group-label-border-color);background-color:var(--ful-radio-group-label-bg);border-radius:4px;padding:8px 10px;height:100%;cursor:pointer;&>div{flex:1}}& label:has(input[type=radio]:checked){background-color:var(--ful-radio-group-label-checked-bg);border-color:var(--ful-radio-group-label-checked-border-color)}& label:has(input[type=radio]:disabled){background-color:var(--ful-radio-group-label-disabled-bg);border-color:var(--ful-radio-group-label-disabled-border-color)}& input[type=radio]{margin-left:8px;margin-right:12px;height:16px;width:16px;vertical-align:text-bottom;accent-color:var(--ful-accent-ink)}& input[type=radio]:focus-visible{outline:0}& label:has(input[type=radio]:focus-visible){border-color:var(--ful-focus-border-color);box-shadow:var(--ful-focus-box-shadow)}}ful-radio{display:none}}
-@layer ful.components{:has(>ful-choice){display:block}}
+@layer ful.components{:has(>ful-choice){display:block}.ful-stacked>ful-choice{display:grid;grid-template-columns:max-content auto;grid-template-rows:auto minmax(calc(var(--ful-controls-height) + 2 * var(--ful-controls-border-width)),auto);justify-content:start;align-items:center;column-gap:.5rem;row-gap:0;padding:0;&>label{grid-row:1;grid-column:1;display:inline-block;flex:none;margin:0 .25rem .5rem 0;color:var(--ful-color)}&>input[type=checkbox]{grid-row:2;grid-column:1/-1;justify-self:start;font-size:1.25em}}}
 @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{ful-empty{display:block;padding:2rem 1rem;color:var(--ful-color);text-align:center;opacity:.65;&>ful-icon{display:block;width:2rem;height:2rem;margin:0 auto .5rem}&>:first-child{margin-block-start:0}&>:last-child{margin-block-end:0}}}
 @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=empty],& tbody[data-ref=feedback],& tbody[data-ref=initial],& tbody[data-ref=loading]{height:360px;& td{& p{margin-top:1rem}}}& td[colspan]:has(>ful-empty){padding:0}}ful-sorter{display:inline-flex;align-items:baseline;gap:.25em;&:not(:state(rendered)){visibility:hidden}cursor:pointer;&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}}