@optionfactory/fml 9.0.0-rc21 → 9.0.0-rc23
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/dist/custom-elements.json +21 -7
- package/dist/fml.css +3 -3
- package/dist/fml.css.map +1 -1
- package/dist/fml.iife.js +256 -66
- package/dist/fml.iife.js.map +1 -1
- package/dist/fml.iife.min.js +1 -1
- package/dist/fml.iife.min.js.map +1 -1
- package/dist/ful.css +3 -3
- package/dist/ful.css.map +1 -1
- package/dist/ful.d.mts +102 -32
- package/dist/ful.iife.js +256 -66
- package/dist/ful.iife.js.map +1 -1
- package/dist/ful.iife.min.js +1 -1
- package/dist/ful.iife.min.js.map +1 -1
- package/dist/ful.min.mjs +1 -1
- package/dist/ful.min.mjs.map +1 -1
- package/dist/ful.mjs +256 -66
- package/dist/ful.mjs.map +1 -1
- package/dist/vscode.html-custom-data.json +11 -3
- package/dist/web-types.json +24 -8
- package/package.json +1 -1
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"name": "Dialog",
|
|
49
49
|
"tagName": "ful-dialog",
|
|
50
50
|
"customElement": true,
|
|
51
|
-
"description": "A modal dialog on the native platform: header, body and buttons, the header attribute naming its heading, opened by any element carrying dialog-target set to its id, or programmatically through open()/ask(), which answer with how the dialog ended, or through update(callback), which opens it on a loading state and then shows either what the callback delivered or the problems of a rejection. Longer explanations belong here, shorter ones in ful-tooltip. Dialog.ask(header, body, buttons) and Dialog.confirm(header, body, labels) ask a question in a transient one, building, showing, answering and removing the element themselves; a confirm's cancel, close and Escape all answer the negative.",
|
|
51
|
+
"description": "A modal dialog on the native platform: header, body and buttons, the header attribute naming its heading, opened by any element carrying dialog-target set to its id, or programmatically through open()/ask(), which answer with how the dialog ended, or through update(callback), which opens it on a loading state and then shows either what the callback delivered or the problems of a rejection. dismiss(reason) dismisses it as the close button would, refusable and guarded alike, answering whether it closed. Longer explanations belong here, shorter ones in ful-tooltip. Dialog.ask(header, body, buttons) and Dialog.confirm(header, body, labels) ask a question in a transient one, building, showing, answering and removing the element themselves; a confirm's cancel, close and Escape all answer the negative.",
|
|
52
52
|
"attributes": [
|
|
53
53
|
{
|
|
54
54
|
"name": "header",
|
|
@@ -70,6 +70,13 @@
|
|
|
70
70
|
"type": {
|
|
71
71
|
"text": "boolean"
|
|
72
72
|
}
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"name": "guard-dismiss",
|
|
76
|
+
"description": "For the dialog holding a form the user edits: a dismissal nobody refused, while a ful-form of the dialog under track-changes holds edits not saved yet, first asks the user through Dialog.confirm whether to close and drop them, with the localized dialog.discard texts. Gestures and dismiss() are asked about; close(), a data-result button, close-on-submit and update() are answers or the page deciding, and ask nothing. A second Escape with no interaction in between closes it whatever the user would answer.",
|
|
77
|
+
"type": {
|
|
78
|
+
"text": "boolean"
|
|
79
|
+
}
|
|
73
80
|
}
|
|
74
81
|
],
|
|
75
82
|
"slots": [
|
|
@@ -103,7 +110,7 @@
|
|
|
103
110
|
},
|
|
104
111
|
{
|
|
105
112
|
"name": "dialog:dismiss",
|
|
106
|
-
"description": "Fired before the close button, Escape
|
|
113
|
+
"description": "Fired before the close button, Escape, a backdrop click or dismiss(reason) closes the dialog, with detail.reason (button, escape, backdrop or the one dismiss() was given): cancelable, so preventDefault() keeps it open. Not fired for a data-result button, close-on-submit or close(). A second Escape with no interaction in between closes the dialog whatever the page does, and its dialog:dismiss is then not cancelable.",
|
|
107
114
|
"type": {
|
|
108
115
|
"text": "CustomEvent"
|
|
109
116
|
}
|
|
@@ -115,7 +122,7 @@
|
|
|
115
122
|
"name": "Drawer",
|
|
116
123
|
"tagName": "ful-drawer",
|
|
117
124
|
"customElement": true,
|
|
118
|
-
"description": "A side panel drawer on the native dialog platform: a header with its title (the header attribute, or update()'s own) and close button, and a body that opens in a loading state, then shows either the content delivered by update(header, callback) (or the slotted one, when it is never updated) or the error a rejecting callback carries. placement picks the side, end by default, start its mirror. Any element carrying dialog-target set to its id opens it too.",
|
|
125
|
+
"description": "A side panel drawer on the native dialog platform: a header with its title (the header attribute, or update()'s own) and close button, and a body that opens in a loading state, then shows either the content delivered by update(header, callback) (or the slotted one, when it is never updated) or the error a rejecting callback carries. placement picks the side, end by default, start its mirror. open()/ask() answer with how the drawer ended, as a ful-dialog's do, an ask() on a drawer update() opened waiting for that opening's ending; dismiss(reason) dismisses it as the close button would, refusable and guarded alike, answering whether it closed. Any element carrying dialog-target set to its id opens it too.",
|
|
119
126
|
"attributes": [
|
|
120
127
|
{
|
|
121
128
|
"name": "header",
|
|
@@ -137,6 +144,13 @@
|
|
|
137
144
|
"type": {
|
|
138
145
|
"text": "boolean"
|
|
139
146
|
}
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": "guard-dismiss",
|
|
150
|
+
"description": "For the drawer holding a form the user edits: a dismissal nobody refused, while a ful-form of the drawer under track-changes holds edits not saved yet, first asks the user through Dialog.confirm whether to close and drop them, with the localized dialog.discard texts. Gestures and dismiss() are asked about; close(), a data-result button, close-on-submit and update() are answers or the page deciding, and ask nothing. A second Escape with no interaction in between closes it whatever the user would answer.",
|
|
151
|
+
"type": {
|
|
152
|
+
"text": "boolean"
|
|
153
|
+
}
|
|
140
154
|
}
|
|
141
155
|
],
|
|
142
156
|
"slots": [
|
|
@@ -152,7 +166,7 @@
|
|
|
152
166
|
"events": [
|
|
153
167
|
{
|
|
154
168
|
"name": "close",
|
|
155
|
-
"description": "Fired when the drawer closes, carrying how it ended: dismissed tells the close button and Escape from
|
|
169
|
+
"description": "Fired when the drawer closes, carrying how it ended, the same object a ful-dialog answers with: dismissed tells the close button and Escape from an answer, result the data-result of the button, or the argument of close(result), that closed it, and response what a submit answered with under close-on-submit, a save answering with no body at all being a save all the same. ask() and open() resolve with the same object, and a drawer leaving the document while open answers its waiters with a dismissal.",
|
|
156
170
|
"type": {
|
|
157
171
|
"text": "CustomEvent"
|
|
158
172
|
}
|
|
@@ -166,7 +180,7 @@
|
|
|
166
180
|
},
|
|
167
181
|
{
|
|
168
182
|
"name": "drawer:dismiss",
|
|
169
|
-
"description": "Fired before the close button, Escape
|
|
183
|
+
"description": "Fired before the close button, Escape, a backdrop click or dismiss(reason) closes the drawer, with detail.reason (button, escape, backdrop or the one dismiss() was given): cancelable, so preventDefault() keeps it open. Not fired for a data-result button, close-on-submit or close(). A second Escape with no interaction in between closes the drawer at once, and its drawer:dismiss is then not cancelable.",
|
|
170
184
|
"type": {
|
|
171
185
|
"text": "CustomEvent"
|
|
172
186
|
}
|
|
@@ -381,7 +395,7 @@
|
|
|
381
395
|
},
|
|
382
396
|
{
|
|
383
397
|
"name": "track-changes",
|
|
384
|
-
"description": "Keeps track of the edits not saved yet: dirty answers whether a field the user edited since the last commit holds another value, the host matches :state(dirty) and the submit buttons carry a dot while it does. A successful submit commits, and so does the form once its fields have rendered; commit() is for a save of the page's own.",
|
|
398
|
+
"description": "Keeps track of the edits not saved yet: dirty answers whether a field the user edited since the last commit holds another value, the host matches :state(dirty) and the submit buttons carry a dot while it does. A successful submit commits, and so does the form once its fields have rendered; commit() is for a save of the page's own, and save() submits only while there is something to save, answering whether nothing unsaved is left. A ful-drawer or ful-dialog under guard-dismiss asks before a dismissal drops the edits.",
|
|
385
399
|
"type": {
|
|
386
400
|
"text": "boolean"
|
|
387
401
|
}
|
|
@@ -419,7 +433,7 @@
|
|
|
419
433
|
},
|
|
420
434
|
{
|
|
421
435
|
"name": "submit:failure",
|
|
422
|
-
"description": "Fired with the exception when the submit fails. The form does not rethrow.",
|
|
436
|
+
"description": "Fired with the exception when the submit fails. The form does not rethrow: submit() resolves false, as it resolves true after submit:success.",
|
|
423
437
|
"type": {
|
|
424
438
|
"text": "CustomEvent"
|
|
425
439
|
}
|
package/dist/fml.css
CHANGED
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
@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}}:has(>ful-table-wrapper).ful-fill{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;&>ful-table-wrapper{flex:1 1 auto;min-height:0;overflow:auto}&>:not(ful-table-wrapper){flex:none}}ful-sorter{display:inline-flex;align-items:baseline;gap:.25em;cursor:pointer;&:not(:state(rendered)){visibility:hidden}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}&:before{content:"";display:inline-block;flex:0 0 auto;width:1em;height:1em;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>')}}: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)}& button[aria-current=page]{color:var(--ful-active-color);background-color:var(--ful-active-bg);border-color:var(--ful-active-bg)}}ful-table-wrapper{& table{width:100%;margin-bottom:1rem;border-collapse:separate;border-spacing:0}& 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{position:sticky;inset-block-start:0;z-index:1;background-color:var(--ful-bg);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}}}}
|
|
17
17
|
@layer ful.components{ful-affix:has(>button[data-ref=operator],>button[data-ref=sensitivity]){min-width:4rem;&>button[data-ref=operator]{min-width:4rem}&>button[data-ref=sensitivity]{min-width:2.5rem}&>button[data-ref=operator]:hover,&>button[data-ref=sensitivity]:hover{color:var(--ful-active-color);background-color:var(--ful-active-bg)}&>button[data-ref=operator]:focus,&>button[data-ref=sensitivity]:focus{outline:0}&>button[data-ref=operator]:focus-visible,&>button[data-ref=sensitivity]:focus-visible{background-color:color-mix(in srgb,var(--ful-active-bg) 20%,transparent)}&>button[data-ref=operator]:disabled,&>button[data-ref=sensitivity]:disabled{cursor:default;opacity:.5}}ful-affix:has(>button[hidden]):not(:has(>button:not([hidden]))){display:none}ful-control-group>button[data-ref=value]{position:relative;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;border:0;border-radius:0;cursor:pointer;&:after{content:"";position:absolute;top:50%;right:.75rem;width:16px;height:12px;translate:0 -50%;background-color:currentcolor;mask: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%23000%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") center /16px 12px no-repeat;pointer-events:none}}ful-control-group>button[data-ref=value]:focus{outline:0}ful-control-group>button[data-ref=value]:disabled{cursor:default;opacity:.5;&:after{display:none}}ful-affix:has(>button[data-ref=operator],>button[data-ref=sensitivity])>ul[popover],ful-control-group>button[data-ref=value]+ul[popover]{min-width:6rem;list-style:none;&>li>a{display:flex;align-items:center;gap:.5rem;padding:.25rem 1rem;color:var(--ful-color);text-decoration:none;cursor:pointer;&>span:first-child{flex:0 0 2.25em;text-align:center}}&>li>a[aria-checked=true]{background-color:color-mix(in srgb,var(--ful-active-bg) 12%,transparent);box-shadow:inset .2rem 0 0 var(--ful-active-bg)}&>li>a:hover{background-color:var(--ful-selected-bg)}&>li>a:focus-visible{background-color:var(--ful-selected-bg);outline:0}&>li>a:active{color:var(--ful-active-color);background-color:var(--ful-active-bg)}}}
|
|
18
18
|
@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);cursor:pointer;& ful-icon{width:1rem;height:1rem}&:hover{color:var(--ful-accent-ink);background-color:color-mix(in srgb,var(--ful-active-bg) 12%,transparent)}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}.ful-note,ful-note{--ful-note-gap:0.5rem;--ful-note-callout-size:0.5rem;--ful-note-callout-edge:calc(var(--ful-border-radius) + var(--ful-note-callout-size));display:none;max-width:20rem;padding:.5rem .75rem;color:var(--ful-color);background-color:var(--ful-bg);background-clip:padding-box;border:var(--ful-border-width) solid var(--ful-border-color);border-radius:var(--ful-border-radius);font-size:.875rem;font-weight:400;font-style:normal;text-align:start;white-space:normal;margin:var(--ful-note-gap) 0 0;&>:first-child{margin-block-start:0}&>:last-child{margin-block-end:0}&:popover-open{display:block;overflow:visible}&:popover-open:after{content:"";position:absolute;width:var(--ful-note-callout-size);height:var(--ful-note-callout-size);background-color:inherit;border:0 solid var(--ful-border-color);rotate:45deg}&:popover-open:after{top:calc(-.5 * var(--ful-note-callout-size) - .5 * var(--ful-border-width));left:clamp(var(--ful-note-callout-edge),var(--ful-note-callout-inline,50%),100% - var(--ful-note-callout-edge));translate:-50% 0;border-block-start-width:var(--ful-border-width);border-inline-start-width:var(--ful-border-width)}&[placement=top]:popover-open{margin:0 0 var(--ful-note-gap);&:after{top:auto;bottom:calc(-.5 * var(--ful-note-callout-size) - .5 * var(--ful-border-width));border-block-start-width:0;border-inline-start-width:0;border-block-end-width:var(--ful-border-width);border-inline-end-width:var(--ful-border-width)}}&[placement=right]:popover-open{margin:0 0 0 var(--ful-note-gap);&:after{top:clamp(var(--ful-note-callout-edge),var(--ful-note-callout-block,50%),100% - var(--ful-note-callout-edge));left:calc(-.5 * var(--ful-note-callout-size) - .5 * var(--ful-border-width));translate:0 -50%;border-block-start-width:0;border-inline-start-width:var(--ful-border-width);border-block-end-width:var(--ful-border-width)}}&[placement=left]:popover-open{margin:0 var(--ful-note-gap) 0 0;&:after{top:clamp(var(--ful-note-callout-edge),var(--ful-note-callout-block,50%),100% - var(--ful-note-callout-edge));left:auto;right:calc(-.5 * var(--ful-note-callout-size) - .5 * var(--ful-border-width));translate:0 -50%;border-block-start-width:var(--ful-border-width);border-inline-end-width:var(--ful-border-width);border-inline-start-width:0}}}}
|
|
19
|
-
@layer ful.components{dialog.ful-dialog{--ful-dialog-width
|
|
20
|
-
@layer ful.components{dialog.ful-drawer{
|
|
19
|
+
@layer ful.components{dialog.ful-dialog{width:var(--ful-dialog-width,min(90vw,32rem));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)}& :has(.ful-dialog-body),&[open]{display:flex;flex-direction:column;min-height:0}& :has(.ful-dialog-body){flex:1 1 auto}& .ful-dialog-header,&>header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 1.25rem .5rem;& h2{margin:0;font-size:1.125rem;margin-inline-end:auto}&>:not(h2,button[data-ref=close]){flex:0 0 auto}&>button[data-ref=close]:only-child{margin-inline-start:auto}}& .ful-dialog-body,&>[data-ref=body]{flex:1 1 auto;min-height:0;overflow-y:auto;padding:.5rem 1.25rem}& .ful-dialog-body .ful-dialog-footer:last-child{position:sticky;z-index:2;inset-block-end:-.5rem;margin-block-end:-.5rem;background-color:var(--ful-bg)}&>[data-ref=loading]{display:grid;place-items:center;padding:2rem 1.25rem}&>[data-ref=error]{margin:.5rem 1.25rem}&>footer.ful-dialog-footer:empty{display:none}& .ful-dialog-body :is(.ful-dialog-header,.ful-dialog-footer){padding-inline:0}& .ful-dialog-footer,&>footer{flex:none;display:flex;justify-content:flex-end;gap:.5rem;padding:.5rem 1.25rem 1rem;&>button:not(.ful-button){padding:.375rem .75rem;height:var(--ful-controls-height);border:var(--ful-controls-border-width) solid var(--ful-controls-border-color);border-radius:var(--ful-controls-border-radius);background-color:var(--ful-selected-bg);color:var(--ful-color);cursor:pointer;&:hover{background-color:var(--ful-active-bg);color:var(--ful-active-color)}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}}}}}
|
|
20
|
+
@layer ful.components{dialog.ful-drawer{position:fixed;inset-block:0;inset-inline-start:auto;inset-inline-end:0;width:var(--ful-drawer-width,min(90vw,28rem));max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:var(--ful-border-width) solid var(--ful-border-color);border-start-start-radius:var(--ful-border-radius);border-end-start-radius:var(--ful-border-radius);background-color:var(--ful-bg);color:var(--ful-color);&::backdrop{background-color:var(--ful-backdrop-color)}&[open]{display:flex;flex-direction:column;animation:ful-drawer-slide-in .2s ease-out;&[closing]{animation:ful-drawer-slide-out .2s ease-in forwards}}&>header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 1.25rem .5rem;& h2{margin:0;font-size:1.125rem}}&>section{padding:.5rem 1.25rem 1rem;overflow-y:auto;&[data-ref=content]{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;&>ful-form:has(>form>footer:last-child){display:flex;flex-direction:column;flex:1 1 auto}&>footer:last-child,&>ful-form>form>footer:last-child{position:sticky;z-index:2;inset-block-end:-1rem;margin-block:auto -1rem;padding-block-end:1rem;background-color:var(--ful-bg)}}&[data-ref=loading]{display:grid;place-items:center;flex-grow:1}&[data-ref=error]{margin:0 1.25rem}}&[placement=start]{inset-inline-end:auto;inset-inline-start:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--ful-border-radius);border-end-end-radius:var(--ful-border-radius);&[open]{animation-name:ful-drawer-slide-in-start;&[closing]{animation-name:ful-drawer-slide-out-start}}}&:dir(rtl)[open]{animation-name:ful-drawer-slide-in-start;&[closing]{animation-name:ful-drawer-slide-out-start}}&[placement=start]:dir(rtl)[open]{animation-name:ful-drawer-slide-in;&[closing]{animation-name:ful-drawer-slide-out}}@media (max-width:30rem){width:var(--ful-drawer-width,100vw);&,&[placement=start]{border-radius:0}}}@keyframes ful-drawer-slide-in{0%{transform:translateX(1rem);opacity:0}}@keyframes ful-drawer-slide-in-start{0%{transform:translateX(-1rem);opacity:0}}@keyframes ful-drawer-slide-out{to{transform:translateX(1rem);opacity:0}}@keyframes ful-drawer-slide-out-start{to{transform:translateX(-1rem);opacity:0}}@media (prefers-reduced-motion:reduce){dialog.ful-drawer[open]{animation:none}}}
|
|
21
21
|
@layer ful.components{ful-affix:has(>button[data-ref=operator],>button[data-ref=sensitivity])>ul[popover],ful-control-group>button[data-ref=value]+ul[popover],ful-menu[popover]{inset:auto;top:anchor(bottom);left:anchor(left);position-try-fallbacks:flip-block;margin:.3rem 0 0;padding:.5rem 0;color:var(--ful-color);background-color:var(--ful-bg);background-clip:padding-box;border:var(--ful-border-width) solid var(--ful-border-color);border-radius:var(--ful-border-radius);&:popover-open{display:block}}ful-menu[popover]{min-width:8rem;&>a,&>button{display:flex;align-items:center;gap:.5rem;width:100%;padding:.25rem 1rem;font:inherit;color:var(--ful-color);text-align:start;text-decoration:none;cursor:pointer;background:none;border:0}&>a:focus,&>a:hover,&>button:focus,&>button:hover{background-color:var(--ful-selected-bg);outline:0}&>a:active,&>button:active{color:var(--ful-active-color);background-color:var(--ful-active-bg)}&>button:disabled{cursor:default;opacity:.5;background:none}&>hr{margin:.5rem 0;border:0;border-top:var(--ful-border-width) solid var(--ful-border-color)}}}
|
|
22
|
-
@layer ful.components{ful-toasts:not(:has(>ful-toast)){display:none}:has(>ful-toast){
|
|
22
|
+
@layer ful.components{ful-toasts:not(:has(>ful-toast)){display:none}:has(>ful-toast){position:fixed;inset-block:1rem auto;inset-inline:auto 1rem;overflow:visible;margin:0;padding:0;border:0;background:transparent;color:inherit;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;max-width:var(--ful-toasts-max-width,min(90vw,24rem));&>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{flex:0 0 auto;width:1.25rem;height:1.25rem;color:inherit}&>button.ful-toast-action{width:auto;align-self:center;padding:0 .375rem;font-weight:600;color:var(--ful-accent-ink)}&.success{border-color:var(--ful-accent-ink);color:var(--ful-accent-ink)}&.warning{border-color:var(--ful-warning-border-color);background-color:var(--ful-warning-bg);color:var(--ful-warning-color)}&.error{border-color:var(--ful-error-border-color);background-color:var(--ful-error-bg);color:var(--ful-error-color)}&.ful-toast-out{animation:ful-toast-out .2s ease-in forwards}}}@keyframes ful-toast-in{0%{transform:translateY(-.5rem);opacity:0}}@keyframes ful-toast-out{to{transform:translateY(-.5rem);opacity:0}}@media (prefers-reduced-motion:reduce){:has(>ful-toast)>ful-toast{animation:none}}}
|
|
23
23
|
@layer ful.components{:has(>ful-tablist){display:block;&>[role=tabpanel]{padding-block-start:1rem}}ful-tablist{display:flex;flex-wrap:wrap;gap:.25rem;border-block-end:var(--ful-border-width) solid var(--ful-border-color);&>button{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:var(--ful-controls-height);padding:.375rem .75rem;font:inherit;line-height:1.5;color:var(--ful-muted-color);background:none;border:var(--ful-border-width) solid transparent;border-start-start-radius:var(--ful-border-radius);border-start-end-radius:var(--ful-border-radius);cursor:pointer;&:hover{color:var(--ful-color);background-color:var(--ful-selected-bg)}&:focus-visible{outline:0;box-shadow:var(--ful-focus-box-shadow)}&[aria-selected=true]{color:var(--ful-color);background-color:var(--ful-bg);border-color:var(--ful-border-color) var(--ful-border-color) transparent;font-weight:600}}}}
|
|
24
24
|
@layer ful.components{:has(>ful-accordion-group){display:block}ful-accordion-group{display:block;&>details{color:var(--ful-color);background-color:var(--ful-bg);border:var(--ful-border-width) solid var(--ful-border-color);border-radius:var(--ful-border-radius);&+details{margin-top:.5rem}&:has(>summary:focus-visible){border-color:var(--ful-focus-border-color);box-shadow:var(--ful-focus-box-shadow)}&>summary{display:flex;align-items:center;gap:.5rem;min-height:var(--ful-controls-height);padding:.375rem .75rem;font:inherit;line-height:1.5;cursor:pointer;list-style:none;outline:0;&::-webkit-details-marker{display:none}&:after{content:"";margin-inline-start:auto;flex:0 0 auto;width:1em;height:1em;background-color:currentcolor;mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');mask-repeat:no-repeat;mask-position:center;mask-size:contain;transition:rotate .2s ease-out;@media (prefers-reduced-motion:reduce){transition:none}}}&[open]>summary:after{rotate:180deg}&>:not(summary){padding:.5rem .75rem .75rem}}}}
|
|
25
25
|
@layer ful.components{:has(>ful-steps){display:flex;flex-direction:column;&>section:not([aria-current=step]){display:none}}ful-steps{display:block;& ol{display:flex;flex-wrap:wrap;margin:0 0 1rem;padding:0;list-style:none}& li:not([aria-current=step]){display:none}& li[aria-current=step]{display:flex;align-items:center;flex:0 1 auto;min-height:var(--ful-controls-height);padding:.375rem .5rem;font-weight:700;color:var(--ful-accent-ink)}}ful-wizard{&[progress=timeline]{& ful-steps li{display:flex;justify-content:center;flex:1 1 auto;min-width:min(100%,8rem);text-align:center;color:var(--ful-accent-ink);border-block-end:calc(2 * var(--ful-border-width)) solid var(--ful-accent-ink)}& ful-steps li[aria-current=step]~li{color:color-mix(in srgb,var(--ful-color) 65%,var(--ful-bg));border-block-end-color:var(--ful-border-color)}}&[progress=dots]{& ful-steps ol{gap:.375rem;margin-block-end:1rem}& ful-steps li{display:block;flex:0 0 auto;min-width:0;min-height:0;width:.5rem;height:.5rem;padding:0;font-size:0;border-radius:50%;background-color:var(--ful-accent-ink)}& ful-steps li[aria-current=step]{background-color:var(--ful-active-bg);box-shadow:0 0 0 .125rem color-mix(in srgb,var(--ful-active-bg) 35%,transparent)}& ful-steps li[aria-current=step]~li{background-color:var(--ful-border-color)}}&[progress=none]{& ful-steps{display:none}}}}
|