@optionfactory/fml 9.0.0-rc1 → 9.0.0-rc3

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.
package/README.md CHANGED
@@ -13,7 +13,7 @@ An http client
13
13
  ## ful
14
14
  A no-build web components library based on ftl
15
15
 
16
- ful fields report their values through `ful-form`'s intercepted submit: a plain `<form>` carrying them submits none of their values. Expressions compare strictly (`==` is `===`, and there is no coercing spelling), and message placeholders are `\w+` names: `{amount}` yes, `{user-name}` no.
16
+ ful fields report their values through `ful-form`'s intercepted submit: a plain `<form>` carrying them submits none of their values. Expressions compare strictly (`==` is `===`, and there is no coercing spelling), and message placeholders are `\w+` names: `{amount}` yes, `{user-name}` no. Every field names its control in the markup, a `<label for>` pointing at it or `aria-labelledby` where the control is not something a `for` may target, so an accessibility audit and the browser's autofill read the label too and not assistive technology alone.
17
17
 
18
18
  ### Localization
19
19
 
@@ -83,10 +83,9 @@ See `examples/ful/kitchen-sink.html` for a page showing every component in its n
83
83
 
84
84
  fml targets evergreen browsers from spring 2024. The hard floor is Chrome/Edge 123 (March 2024), Firefox 125 (April 2024) and Safari 17.5 (May 2024), set by the newest platform features the library leans on everywhere: `light-dark()`, the Popover API, `Promise.withResolvers`, `:has()` and native CSS nesting. Below the floor, script or styling fail outright.
85
85
 
86
- Two features degrade instead of breaking under newer floors of their own, and another carries its own fallback:
86
+ One feature degrades instead of breaking under a newer floor of its own, and another carries its own fallback:
87
87
 
88
88
  - the flash guard that keeps a field invisible until it has rendered is a custom state matched with `:state()`, Baseline since May 2024: Chrome/Edge 125, Firefox 126, Safari and iOS 17.4, so Safari is already below the hard floor and only Chrome 123-124 and Firefox 125 are affected. There the rule is dropped and a field shows for the moment between being parsed and being rendered
89
- - the fields' label and description wiring uses aria element reflection, Baseline since April 2025: an older browser keeps the visible layout intact while assistive technology silently loses the label and description associations
90
89
  - anchored popovers (the tooltip's note, the select's dropdown, the filter and boolean-value menus) need CSS anchor positioning: Chrome/Edge 129 (September 2024), Safari 26 (September 2025), Firefox 147 (January 2026; Firefox's support is partial against the full specification, but covers the subset fml uses, `anchor-name`, `position-anchor`, `position-area` (Baseline since January 2026), `anchor()` and `anchor-size()`). Below these a hand-placed fallback keeps the popovers anchored beside their invoker, and never runs where the css works
91
90
 
92
91
  On iOS every browser runs the system WebKit, so the floor reads in iOS versions: iOS 17.5 (May 2024) or newer, which every iPhone from the XS/XR (2018) onward can reach; the anchored popovers fall back to hand placing below iOS 26 (September 2025).
@@ -94,6 +94,10 @@
94
94
  }
95
95
  ],
96
96
  "slots": [
97
+ {
98
+ "name": "header",
99
+ "description": "Content beside the title and before it: an icon, a badge, a status. It sits outside the heading rather than in it, update() setting the title through textContent and taking anything nested there with it."
100
+ },
97
101
  {
98
102
  "name": "",
99
103
  "description": "The drawer body, shown when update() never replaced it."
@@ -296,6 +300,13 @@
296
300
  "type": {
297
301
  "text": "boolean"
298
302
  }
303
+ },
304
+ {
305
+ "name": "autocomplete",
306
+ "description": "The autofill token every field in the form takes unless it declares one of its own, copied onto the form element the host renders. A form cannot pass it down the way the platform would: each control carries form=\"\" so that the host is the only thing that submits, which leaves it with no form owner to inherit through, so the fields read it off the form instead.",
307
+ "type": {
308
+ "text": "string"
309
+ }
299
310
  }
300
311
  ],
301
312
  "slots": [],
@@ -442,6 +453,13 @@
442
453
  "text": "boolean"
443
454
  }
444
455
  },
456
+ {
457
+ "name": "autocomplete",
458
+ "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.",
459
+ "type": {
460
+ "text": "string"
461
+ }
462
+ },
445
463
  {
446
464
  "name": "disabled",
447
465
  "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.",
@@ -555,6 +573,13 @@
555
573
  "text": "boolean"
556
574
  }
557
575
  },
576
+ {
577
+ "name": "autocomplete",
578
+ "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.",
579
+ "type": {
580
+ "text": "string"
581
+ }
582
+ },
558
583
  {
559
584
  "name": "disabled",
560
585
  "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.",
@@ -771,6 +796,13 @@
771
796
  "text": "boolean"
772
797
  }
773
798
  },
799
+ {
800
+ "name": "autocomplete",
801
+ "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.",
802
+ "type": {
803
+ "text": "string"
804
+ }
805
+ },
774
806
  {
775
807
  "name": "disabled",
776
808
  "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.",
@@ -905,6 +937,13 @@
905
937
  "text": "boolean"
906
938
  }
907
939
  },
940
+ {
941
+ "name": "autocomplete",
942
+ "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.",
943
+ "type": {
944
+ "text": "string"
945
+ }
946
+ },
908
947
  {
909
948
  "name": "disabled",
910
949
  "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.",
@@ -1039,6 +1078,13 @@
1039
1078
  "text": "boolean"
1040
1079
  }
1041
1080
  },
1081
+ {
1082
+ "name": "autocomplete",
1083
+ "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.",
1084
+ "type": {
1085
+ "text": "string"
1086
+ }
1087
+ },
1042
1088
  {
1043
1089
  "name": "disabled",
1044
1090
  "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.",
@@ -1365,6 +1411,13 @@
1365
1411
  "text": "boolean"
1366
1412
  }
1367
1413
  },
1414
+ {
1415
+ "name": "autocomplete",
1416
+ "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.",
1417
+ "type": {
1418
+ "text": "string"
1419
+ }
1420
+ },
1368
1421
  {
1369
1422
  "name": "disabled",
1370
1423
  "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.",
@@ -1485,6 +1538,13 @@
1485
1538
  "text": "boolean"
1486
1539
  }
1487
1540
  },
1541
+ {
1542
+ "name": "autocomplete",
1543
+ "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.",
1544
+ "type": {
1545
+ "text": "string"
1546
+ }
1547
+ },
1488
1548
  {
1489
1549
  "name": "disabled",
1490
1550
  "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.",
@@ -1605,6 +1665,13 @@
1605
1665
  "text": "boolean"
1606
1666
  }
1607
1667
  },
1668
+ {
1669
+ "name": "autocomplete",
1670
+ "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.",
1671
+ "type": {
1672
+ "text": "string"
1673
+ }
1674
+ },
1608
1675
  {
1609
1676
  "name": "disabled",
1610
1677
  "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.",
@@ -1796,6 +1863,13 @@
1796
1863
  "text": "boolean"
1797
1864
  }
1798
1865
  },
1866
+ {
1867
+ "name": "autocomplete",
1868
+ "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.",
1869
+ "type": {
1870
+ "text": "string"
1871
+ }
1872
+ },
1799
1873
  {
1800
1874
  "name": "disabled",
1801
1875
  "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 CHANGED
@@ -1,17 +1,17 @@
1
1
  @layer ful.theme, ful.components, ful.hidden;@layer ful.theme{@property --ful-border-width{syntax:"<length>";inherits:true;initial-value:1px}@property --ful-border-radius{syntax:"<length>";inherits:true;initial-value:.375rem}@property --ful-scrollbar-width{syntax:"<length>";inherits:true;initial-value:12px}@property --ful-scrollbar-border-width{syntax:"<length>";inherits:true;initial-value:1px}:root{--ful-color:light-dark(#212529, #dee2e6);--ful-bg:light-dark(#fff, #212529);--ful-muted-color:light-dark(#495057, #adb5bd);--ful-border-width:1px;--ful-border-radius:0.375rem;--ful-border-color:light-dark(#dee2e6, #495057);--ful-disabled-bg:light-dark(#e9ecef, #343a40);--ful-selected-bg:light-dark(#f8f9fa, #343a40);--ful-active-color:#fff;--ful-active-bg:#007376;--ful-accent-ink:light-dark(var(--ful-active-bg), color-mix(in srgb, var(--ful-active-bg) 55%, #fff));--ful-focus-border-color:color-mix(in srgb, var(--ful-active-bg) 75%, #fff);--ful-focus-box-shadow:0 0 0 0.25rem color-mix(in srgb, var(--ful-active-bg) 25%, transparent);--ful-backdrop-color:rgba(0,0,0,.5);--ful-invalid-color:light-dark(#dc3545, #ea868f);--ful-invalid-border-color:var(--ful-invalid-color);--ful-invalid-box-shadow:0 0 0 0.25rem color-mix(in srgb, var(--ful-invalid-color) 25%, transparent);--ful-error-color:#58151c;--ful-error-bg:#f8d7da;--ful-error-border-color:#f1aeb5;--ful-warning-color:#664d03;--ful-warning-bg:#fff3cd;--ful-warning-border-color:#ffe69c;--ful-scrollbar-bg:var(--ful-disabled-bg);--ful-scrollbar-thumb-bg:var(--ful-active-bg);--ful-scrollbar-width:12px;--ful-scrollbar-border-width:1px;--ful-controls-bg:var(--ful-bg);--ful-controls-border-width:var(--ful-border-width);--ful-controls-border-radius:var(--ful-border-radius);--ful-controls-border-color:var(--ful-border-color);--ful-controls-height:calc(1.5em + .75rem + 2px);--ful-spinner-icon-width:1rem;--ful-spinner-icon-height:1rem;--ful-spinner-icon-border-width:0.2em;--ful-spinner-icon-animation-speed:0.75s;--ful-spinner-icon-animation-name:spinner-border;--ful-spinner-icon-color:currentcolor}}
2
2
  @layer ful.components{ful-errors{--ful-errors-color:var(--ful-error-color);--ful-errors-bg:var(--ful-error-bg);--ful-errors-border-color:var(--ful-error-border-color);display:block;padding:1rem;margin-bottom:1rem;color:var(--ful-errors-color);background-color:var(--ful-errors-bg);border:1px solid var(--ful-errors-border-color);border-radius:var(--ful-border-radius)}ful-field-error{--ful-field-error-invalid-color:var(--ful-invalid-color);display:none;font-size:.875rem;:invalid &{display:block;margin-top:.25rem;color:var(--ful-field-error-invalid-color)}}ful-field-warnings{display:none;&:not(:empty){display:block}}ful-field-warning{display:block;margin:.5rem 0;padding:15px;color:var(--ful-warning-color);background-color:var(--ful-warning-bg);border-color:var(--ful-warning-border-color);border-radius:8px;animation:show-and-hide 5s ease forwards;animation-composition:initial}@keyframes show-and-hide{0%{opacity:0;display:block}3%{opacity:1}90%{opacity:1}to{opacity:0;display:none}}}
3
- @layer ful.components{*,:after,:before{box-sizing:border-box}:has(>ful-control-group){display:block}:has(>fieldset>ful-radio-list)>fieldset>legend,:has(>ful-control-group)>label{display:inline-block;margin:0 .25rem .5rem 0;color:var(--ful-color)}:has(>fieldset>ful-radio-list)[required]>fieldset>legend:before,:has(>ful-choice)[required]>ful-choice>label:before,:has(>ful-control-group)[required]>label:before{content:"* ";display:inline;font-weight:700;color:var(--ful-color)}ful-control-group{position:relative;display:flex;flex-wrap:nowrap;width:100%;color:var(--ful-color);background-color:var(--ful-controls-bg);border:var(--ful-controls-border-width) solid var(--ful-controls-border-color);border-radius:var(--ful-controls-border-radius);&:has(:focus-visible):not(:has([popover] :focus-visible)){border-color:var(--ful-focus-border-color);box-shadow:var(--ful-focus-box-shadow)}&>input,&>textarea{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:inherit;background-color:transparent;border:0;border-radius:0;&:focus{outline:0}}&>ful-affix:first-child{border-top-left-radius:calc(var(--ful-controls-border-radius) - var(--ful-controls-border-width));border-bottom-left-radius:calc(var(--ful-controls-border-radius) - var(--ful-controls-border-width))}&>ful-affix:has(+ful-dropdown),&>ful-affix:last-child{border-top-right-radius:calc(var(--ful-controls-border-radius) - var(--ful-controls-border-width));border-bottom-right-radius:calc(var(--ful-controls-border-radius) - var(--ful-controls-border-width))}}ful-affix{flex:0 0 auto;justify-content:center;min-width:var(--ful-controls-height);padding:.375rem .75rem;line-height:1.5;color:var(--ful-color);white-space:nowrap;background-color:var(--ful-selected-bg)}ful-affix,ful-control{display:flex;align-items:center;border:0;border-radius:0}ful-control{position:relative;flex:1 1 auto;min-width:0;min-height:var(--ful-controls-height);cursor:text}:invalid>ful-control-group{border-color:var(--ful-invalid-border-color);&:has(:focus-visible){box-shadow:var(--ful-invalid-box-shadow)}}:disabled>ful-control-group{background-color:var(--ful-disabled-bg)}ful-form [aria-disabled=true]{opacity:.65;cursor:default}ful-badge{display:flex;flex:0 0 auto;align-items:center;margin:5px 0;padding:5px 7px;line-height:1em;color:var(--ful-color);white-space:nowrap;cursor:pointer;background-color:var(--ful-selected-bg);border:var(--ful-border-width) solid var(--ful-border-color);border-radius:var(--ful-border-radius);&:hover{background-color:var(--ful-disabled-bg)}&:focus-visible{border-color:var(--ful-focus-border-color);outline:0}}ful-choice{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.25rem 0;&>label{margin:0;cursor:pointer;flex:1 1 0;min-width:0}& input[type=checkbox]{width:1em;height:1em;margin:0;font-size:inherit;accent-color:var(--ful-active-bg);&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}&[switch] input[type=checkbox]{appearance:none;position:relative;width:2em;height:1em;margin:0;cursor:pointer;background-color:var(--ful-border-color);border-radius:1em;transition:background-color .15s ease-in-out;&:before{content:"";display:block;width:1em;height:1em;background-color:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15);transition:translate .15s ease-in-out}&:checked{background-color:var(--ful-active-bg);&:before{translate:1em 0}}@media (prefers-reduced-motion:reduce){&,&:before{transition:none}}}}:has(>ful-choice):invalid ful-choice input[type=checkbox]{outline:1px solid var(--ful-invalid-border-color);outline-offset:2px}ful-icon,ful-sorter:before{background-color:currentcolor;mask-repeat:no-repeat;mask-position:center;mask-size:contain}ful-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;&[name=search]{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 d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>')}&[name=chevron-left]{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="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/></svg>')}&[name=chevron-right]{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="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></svg>')}&[name=chevron-down]{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>')}&[name=arrow-clockwise]{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="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/></svg>')}&[name=x-lg]{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 d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/></svg>')}&[name=info-circle]{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 d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/></svg>')}&[name=info-circle-fill]{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 d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/></svg>')}&[name=upload]{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 d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/><path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z"/></svg>')}&[name=arrow-down]{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="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/></svg>')}&[name=arrow-up]{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="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/></svg>')}&[name=inbox]{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 d="M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4zm9.954 5H10.45a2.5 2.5 0 0 1-4.9 0H1.066l.32 2.562a.5.5 0 0 0 .497.438h12.234a.5.5 0 0 0 .496-.438zM3.809 3.563A1.5 1.5 0 0 1 4.981 3h6.038a1.5 1.5 0 0 1 1.172.563l3.7 4.625a.5.5 0 0 1 .105.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374z"/></svg>')}&[name=star]{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 d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>')}}:has(>ful-pagination-bar){display:block;margin-top:auto}ful-pagination-bar{display:block;user-select:none;& ul{display:flex;align-items:center;gap:.25rem;margin:.5rem 0 0;padding:0;list-style:none}& li[data-ref=index]{margin-left:0;margin-right:auto;color:var(--ful-color)}& li[data-ref=reload] button{border:0;font-size:1.25rem}& button{display:flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 .5rem;font-size:inherit;font-family:inherit;line-height:1.5;color:var(--ful-color);text-decoration:none;background-color:transparent;border:var(--ful-border-width) solid var(--ful-border-color);border-radius:var(--ful-border-radius);cursor:pointer}& button:hover{background-color:var(--ful-selected-bg)}& button:disabled{opacity:.5;pointer-events:none}& button:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}ful-table-wrapper{& table{width:100%;margin-bottom:1rem;border-collapse:collapse}& caption,& table{color:var(--ful-color)}& caption{padding:.5rem 0;text-align:left;caption-side:bottom}& :is(th,td){padding:.5rem;vertical-align:top;border-bottom:var(--ful-border-width) solid var(--ful-border-color)}& thead th{border-bottom-width:calc(2 * var(--ful-border-width))}& td[colspan]{padding:1.5rem;text-align:center;vertical-align:middle}& tbody[data-ref=feedback]{&>tr>td>div{padding:1rem;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)}& p{margin:0 0 .5rem;font-weight:600}}}ful-sorter{&:before{content:"";display:inline-block;width:1em;height:1em;vertical-align:text-top;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="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/></svg>')}&:not([order]):before{opacity:.35}&[order=desc]:before{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="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/></svg>')}}}
3
+ @layer ful.components{*,:after,:before{box-sizing:border-box}:has(>ful-control-group){display:block}:has(>fieldset>ful-radio-list)>fieldset>legend,:has(>ful-control-group)>label{display:inline-block;margin:0 .25rem .5rem 0;color:var(--ful-color)}:has(>fieldset>ful-radio-list)[required]>fieldset>legend:before,:has(>ful-choice)[required]>ful-choice>label:before,:has(>ful-control-group)[required]>label:before{content:"* ";display:inline;font-weight:700;color:var(--ful-color)}ful-control-group{position:relative;display:flex;flex-wrap:nowrap;width:100%;color:var(--ful-color);background-color:var(--ful-controls-bg);border:var(--ful-controls-border-width) solid var(--ful-controls-border-color);border-radius:var(--ful-controls-border-radius);&:has(:focus-visible):not(:has([popover] :focus-visible)){border-color:var(--ful-focus-border-color);box-shadow:var(--ful-focus-box-shadow)}&>input,&>textarea{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:inherit;background-color:transparent;border:0;border-radius:0;&:focus{outline:0}}&>ful-affix:first-child{border-top-left-radius:calc(var(--ful-controls-border-radius) - var(--ful-controls-border-width));border-bottom-left-radius:calc(var(--ful-controls-border-radius) - var(--ful-controls-border-width))}&>ful-affix:has(+ful-dropdown),&>ful-affix:last-child{border-top-right-radius:calc(var(--ful-controls-border-radius) - var(--ful-controls-border-width));border-bottom-right-radius:calc(var(--ful-controls-border-radius) - var(--ful-controls-border-width))}}ful-affix{display:flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:var(--ful-controls-height);padding:.375rem .75rem;line-height:1.5;color:var(--ful-color);white-space:nowrap;background-color:var(--ful-selected-bg);border:0;border-radius:0}ful-affix:has(>button){padding:0;overflow:hidden}ful-affix>button{display:flex;flex:1 1 auto;align-self:stretch;align-items:center;justify-content:center;padding:.375rem .75rem;font:inherit;line-height:1.5;color:var(--ful-color);white-space:nowrap;background-color:transparent;cursor:pointer}ful-affix>button,ful-affix>button.ful-button,ful-control{border:0;border-radius:0}ful-control{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;min-height:var(--ful-controls-height);cursor:text}:invalid>ful-control-group{border-color:var(--ful-invalid-border-color);&:has(:focus-visible):not(:has([popover] :focus-visible)){border-color:var(--ful-invalid-border-color);box-shadow:var(--ful-invalid-box-shadow)}}:disabled>ful-control-group{background-color:var(--ful-disabled-bg)}ful-form [aria-disabled=true]{opacity:.65;cursor:default}ful-badge{display:flex;flex:0 0 auto;align-items:center;margin:5px 0;padding:5px 7px;line-height:1em;color:var(--ful-color);white-space:nowrap;cursor:pointer;background-color:var(--ful-selected-bg);border:var(--ful-border-width) solid var(--ful-border-color);border-radius:var(--ful-border-radius);&:hover{background-color:var(--ful-disabled-bg)}&:focus-visible{border-color:var(--ful-focus-border-color);outline:0}}ful-choice{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.25rem 0;&>label{margin:0;cursor:pointer;flex:1 1 0;min-width:0}& input[type=checkbox]{width:1em;height:1em;margin:0;font-size:inherit;accent-color:var(--ful-active-bg);&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}&[switch] input[type=checkbox]{appearance:none;position:relative;width:2em;height:1em;margin:0;cursor:pointer;background-color:var(--ful-border-color);border-radius:1em;transition:background-color .15s ease-in-out;&:before{content:"";display:block;width:1em;height:1em;background-color:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15);transition:translate .15s ease-in-out}&:checked{background-color:var(--ful-active-bg);&:before{translate:1em 0}}@media (prefers-reduced-motion:reduce){&,&:before{transition:none}}}}:has(>ful-choice):invalid ful-choice input[type=checkbox]{outline:1px solid var(--ful-invalid-border-color);outline-offset:2px}ful-icon,ful-sorter:before{background-color:currentcolor;mask-repeat:no-repeat;mask-position:center;mask-size:contain}ful-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;&[name=search]{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 d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>')}&[name=chevron-left]{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="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/></svg>')}&[name=chevron-right]{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="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></svg>')}&[name=chevron-down]{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>')}&[name=arrow-clockwise]{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="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/></svg>')}&[name=x-lg]{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 d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/></svg>')}&[name=info-circle]{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 d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/></svg>')}&[name=info-circle-fill]{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 d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/></svg>')}&[name=upload]{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 d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/><path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z"/></svg>')}&[name=arrow-down]{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="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/></svg>')}&[name=arrow-up]{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="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/></svg>')}&[name=inbox]{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 d="M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4zm9.954 5H10.45a2.5 2.5 0 0 1-4.9 0H1.066l.32 2.562a.5.5 0 0 0 .497.438h12.234a.5.5 0 0 0 .496-.438zM3.809 3.563A1.5 1.5 0 0 1 4.981 3h6.038a1.5 1.5 0 0 1 1.172.563l3.7 4.625a.5.5 0 0 1 .105.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374z"/></svg>')}&[name=star]{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 d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>')}}:has(>ful-pagination-bar){display:block;margin-top:auto}ful-pagination-bar{display:block;user-select:none;& ul{display:flex;align-items:center;gap:.25rem;margin:.5rem 0 0;padding:0;list-style:none}& li[data-ref=index]{margin-left:0;margin-right:auto;color:var(--ful-color)}& li[data-ref=reload] button{border:0;font-size:1.25rem}& button{display:flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 .5rem;font-size:inherit;font-family:inherit;line-height:1.5;color:var(--ful-color);text-decoration:none;background-color:transparent;border:var(--ful-border-width) solid var(--ful-border-color);border-radius:var(--ful-border-radius);cursor:pointer}& button:hover{background-color:var(--ful-selected-bg)}& button:disabled{opacity:.5;pointer-events:none}& button:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}ful-table-wrapper{& table{width:100%;margin-bottom:1rem;border-collapse:collapse}& caption,& table{color:var(--ful-color)}& caption{padding:.5rem 0;text-align:left;caption-side:bottom}& :is(th,td){padding:.5rem;vertical-align:top;border-bottom:var(--ful-border-width) solid var(--ful-border-color)}& thead th{border-bottom-width:calc(2 * var(--ful-border-width))}& td[colspan]{padding:1.5rem;text-align:center;vertical-align:middle}& tbody[data-ref=feedback]{&>tr>td>div{padding:1rem;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)}& p{margin:0 0 .5rem;font-weight:600}}}ful-sorter{&:before{content:"";display:inline-block;width:1em;height:1em;vertical-align:text-top;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="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/></svg>')}&:not([order]):before{opacity:.35}&[order=desc]:before{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="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/></svg>')}}}
4
4
  @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}}}
5
5
  @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)}}}
6
6
  @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-tabs,ful-wizard,ful-tooltip,ful-dialog,ful-drawer,ful-table,ful-pagination):not(:state(rendered)){visibility:hidden}}
7
7
  @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}}}}}
8
8
  @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}}}
9
9
  @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}&>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)}p[data-ref=empty]{margin:0;padding:.5rem .751rem;color:var(--ful-dropdown-color);opacity:.65}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)}}}
10
- @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-radio-group-active-bg)}}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}}
10
+ @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}}
11
11
  @layer ful.components{:has(>ful-choice){display:block}}
12
12
  @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)}}}
13
13
  @layer ful.components{:has(>ful-table-wrapper){display:block;& 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)}}}
14
- @layer ful.components{ful-affix:has(>button[data-ref=operator],>button[data-ref=sensitivity]){padding:0;min-width:4rem;overflow:hidden;&>button[data-ref=operator],&>button[data-ref=sensitivity]{display:flex;align-items:center;justify-content:center;flex:1 1 auto;align-self:stretch;padding:.375rem .75rem;font-size:inherit;font-family:inherit;line-height:1.5;color:var(--ful-color);white-space:nowrap;background-color:transparent;border:0;border-radius:0;cursor:pointer}&>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: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)}}}
14
+ @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: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)}}}
15
15
  @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;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)}&>header{padding:1rem 1.25rem .5rem;& h2{margin:0;font-size:1.125rem}}&>[data-ref=body]{padding:.5rem 1.25rem}&>footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.5rem 1.25rem 1rem;&>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)}}}}}
16
16
  @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=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}}}
17
17
  @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}}}