@alxgrn/telefrag-ui 0.0.1 → 0.0.2

package/dist/assets/Block.css

@@ -0,0 +1 @@
+.Block{display:block;margin:var(--alxgrn-unit) 0;padding:var(--alxgrn-unit-half);color:var(--alxgrn-color-text);background-color:var(--alxgrn-bg-light);border-radius:var(--alxgrn-unit-small)}.Block.Accent{color:var(--alxgrn-color-accent);background-color:var(--alxgrn-bg-accent)}.Block.Error{color:var(--alxgrn-color-error);background-color:var(--alxgrn-bg-error)}.Block.Success{color:var(--alxgrn-color-success);background-color:var(--alxgrn-bg-success)}.Block:first-child{margin-top:0}.Block:last-child{margin-bottom:0}.Block p:first-child,.Block .p:first-child{margin-top:0}.Block p:last-child,.Block .p:last-child{margin-bottom:0}

package/dist/assets/Button.css

@@ -1 +1 @@
-:root{--alxgrn-button-bg: var(--alxgrn-bg-button);--alxgrn-button-color: var(--alxgrn-color-button);--alxgrn-button-border: var(--alxgrn-bg-button);--alxgrn-button-bg-error: var(--alxgrn-color-error);--alxgrn-button-color-error: white;--alxgrn-button-border-error: var(--alxgrn-color-error);--alxgrn-button-bg-success: var(--alxgrn-color-success);--alxgrn-button-color-success: white;--alxgrn-button-border-success: var(--alxgrn-color-success);--alxgrn-button-bg-accent: var(--alxgrn-color-accent);--alxgrn-button-color-accent: white;--alxgrn-button-border-accent: var(--alxgrn-color-accent)}.Button,.Button.Default{cursor:pointer;color:var(--alxgrn-button-color);background-color:var(--alxgrn-button-bg);border:1px solid var(--alxgrn-button-border);display:inline-block;margin:0;padding:var(--alxgrn-unit-half) var(--alxgrn-unit-double);text-align:center;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--alxgrn-unit-small);opacity:.9}.Button:hover{opacity:1}.Button.Disabled,.Button.Disabled:hover{cursor:default;opacity:.5}.Button.Success{color:var(--alxgrn-button-color-success);border-color:var(--alxgrn-button-border-success);background-color:var(--alxgrn-button-bg-success)}.Button.Error{color:var(--alxgrn-button-color-error);border-color:var(--alxgrn-button-border-error);background-color:var(--alxgrn-button-bg-error)}.Button.Accent{color:var(--alxgrn-button-color-accent);border-color:var(--alxgrn-button-border-accent);background-color:var(--alxgrn-button-bg-accent)}.Button.Small{font-size:var(--alxgrn-font-small);padding:var(--alxgrn-unit-small) var(--alxgrn-unit)}
+:root{--alxgrn-button-bg: var(--alxgrn-bg-dark);--alxgrn-button-color: white;--alxgrn-button-border: var(--alxgrn-bg-dark);--alxgrn-button-bg-error: var(--alxgrn-color-error);--alxgrn-button-color-error: white;--alxgrn-button-border-error: var(--alxgrn-color-error);--alxgrn-button-bg-success: var(--alxgrn-color-success);--alxgrn-button-color-success: white;--alxgrn-button-border-success: var(--alxgrn-color-success);--alxgrn-button-bg-accent: var(--alxgrn-color-accent);--alxgrn-button-color-accent: white;--alxgrn-button-border-accent: var(--alxgrn-color-accent)}.Button,.Button.Default{cursor:pointer;color:var(--alxgrn-button-color);background-color:var(--alxgrn-button-bg);border:1px solid var(--alxgrn-button-border);display:inline-block;margin:0;padding:var(--alxgrn-unit-half) var(--alxgrn-unit-double);text-align:center;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--alxgrn-unit-small);opacity:.9}.Button:hover{opacity:1}.Button.Disabled,.Button.Disabled:hover{cursor:default;opacity:.5}.Button.Success{color:var(--alxgrn-button-color-success);border-color:var(--alxgrn-button-border-success);background-color:var(--alxgrn-button-bg-success)}.Button.Error{color:var(--alxgrn-button-color-error);border-color:var(--alxgrn-button-border-error);background-color:var(--alxgrn-button-bg-error)}.Button.Accent{color:var(--alxgrn-button-color-accent);border-color:var(--alxgrn-button-border-accent);background-color:var(--alxgrn-button-bg-accent)}.Button.Small{font-size:var(--alxgrn-font-small);padding:var(--alxgrn-unit-small) var(--alxgrn-unit)}

package/dist/assets/DatePicker.css

@@ -1 +1 @@
-:root{--alxgrn-datepicker-bg: transparent;--alxgrn-datepicker-bg-day: var(--alxgrn-bg-disabled);--alxgrn-datepicker-bg-menu: var(--alxgrn-bg-input);--alxgrn-datepicker-bg-hover: var(--alxgrn-bg-focus);--alxgrn-datepicker-bg-select: var(--alxgrn-color-accent);--alxgrn-datepicker-color: var(--alxgrn-color-text);--alxgrn-datepicker-color-accent: var(--alxgrn-color-accent);--alxgrn-datepicker-color-select: white;--alxgrn-datepicker-border: transparent}.FormDatePicker{display:grid;gap:var(--alxgrn-unit-smallest);width:fit-content;overflow:hidden;border:1px solid var(--alxgrn-datepicker-border);border-radius:var(--alxgrn-unit-small);padding:var(--alxgrn-unit-small)}.FormDatePicker *{margin:0;padding:0;text-align:center;color:var(--alxgrn-datepicker-color);background-color:var(--alxgrn-datepicker-bg);line-height:var(--alxgrn-unit-double);-webkit-user-select:none;user-select:none}.FormDatePicker .FormDatePickerMenu{display:grid;grid-template-columns:repeat(7,var(--alxgrn-unit-double));text-transform:capitalize;background-color:var(--alxgrn-datepicker-bg-menu);gap:var(--alxgrn-unit-smallest);border-radius:var(--alxgrn-unit-small);overflow:hidden}.FormDatePicker .FormDatePickerMenu .FormDatePickerText{grid-column:span 5;font-size:smaller}.FormDatePicker .FormDatePickerMenu .FormDatePickerPrev,.FormDatePicker .FormDatePickerMenu .FormDatePickerNext{color:var(--alxgrn-datepicker-color-accent);cursor:pointer}.FormDatePicker .FormDatePickerMenu .FormDatePickerPrev:hover,.FormDatePicker .FormDatePickerMenu .FormDatePickerNext:hover{background-color:var(--alxgrn-datepicker-bg-hover)}.FormDatePicker .FormDatePickerDays{display:grid;grid-template-columns:repeat(7,var(--alxgrn-unit-double));gap:var(--alxgrn-unit-smallest);font-size:smaller}.FormDatePicker .FormDatePickerDays span{background-color:var(--alxgrn-datepicker-bg-day);overflow:hidden;cursor:pointer;border-radius:var(--alxgrn-unit-small)}.FormDatePicker .FormDatePickerDays span:hover{background-color:var(--alxgrn-datepicker-bg-hover)}.FormDatePicker .FormDatePickerDays span.Empty{cursor:default;background-color:var(--alxgrn-datepicker-bg)}.FormDatePicker .FormDatePickerDays span.Selected{color:var(--alxgrn-datepicker-color-select);background-color:var(--alxgrn-datepicker-bg-select)}.FormDatePicker .FormDatePickerDays span.Current{color:var(--alxgrn-datepicker-color-accent);font-weight:700}
+:root{--alxgrn-datepicker-bg: transparent;--alxgrn-datepicker-bg-day: var(--alxgrn-bg-light);--alxgrn-datepicker-bg-menu: var(--alxgrn-bg-accent);--alxgrn-datepicker-bg-hover: var(--alxgrn-bg-active);--alxgrn-datepicker-bg-select: var(--alxgrn-color-accent);--alxgrn-datepicker-color: var(--alxgrn-color-text);--alxgrn-datepicker-color-accent: var(--alxgrn-color-accent);--alxgrn-datepicker-color-select: white;--alxgrn-datepicker-border: transparent}.FormDatePicker{display:grid;gap:var(--alxgrn-unit-smallest);width:fit-content;overflow:hidden;border:1px solid var(--alxgrn-datepicker-border);border-radius:var(--alxgrn-unit-small);padding:var(--alxgrn-unit-small)}.FormDatePicker *{margin:0;padding:0;text-align:center;color:var(--alxgrn-datepicker-color);background-color:var(--alxgrn-datepicker-bg);line-height:var(--alxgrn-unit-double);-webkit-user-select:none;user-select:none}.FormDatePicker .FormDatePickerMenu{display:grid;grid-template-columns:repeat(7,var(--alxgrn-unit-double));text-transform:capitalize;background-color:var(--alxgrn-datepicker-bg-menu);gap:var(--alxgrn-unit-smallest);border-radius:var(--alxgrn-unit-small);overflow:hidden}.FormDatePicker .FormDatePickerMenu .FormDatePickerText{grid-column:span 5;font-size:smaller}.FormDatePicker .FormDatePickerMenu .FormDatePickerPrev,.FormDatePicker .FormDatePickerMenu .FormDatePickerNext{color:var(--alxgrn-datepicker-color-accent);cursor:pointer}.FormDatePicker .FormDatePickerMenu .FormDatePickerPrev:hover,.FormDatePicker .FormDatePickerMenu .FormDatePickerNext:hover{background-color:var(--alxgrn-datepicker-bg-hover)}.FormDatePicker .FormDatePickerDays{display:grid;grid-template-columns:repeat(7,var(--alxgrn-unit-double));gap:var(--alxgrn-unit-smallest);font-size:smaller}.FormDatePicker .FormDatePickerDays span{background-color:var(--alxgrn-datepicker-bg-day);overflow:hidden;cursor:pointer;border-radius:var(--alxgrn-unit-small)}.FormDatePicker .FormDatePickerDays span:hover{background-color:var(--alxgrn-datepicker-bg-hover)}.FormDatePicker .FormDatePickerDays span.Empty{cursor:default;background-color:var(--alxgrn-datepicker-bg)}.FormDatePicker .FormDatePickerDays span.Selected{color:var(--alxgrn-datepicker-color-select);background-color:var(--alxgrn-datepicker-bg-select)}.FormDatePicker .FormDatePickerDays span.Current{color:var(--alxgrn-datepicker-color-accent);font-weight:700}

package/dist/assets/Fieldset.css

@@ -1 +1 @@
-:root{--alxgrn-fieldset-color: var(--alxgrn-color-accent);--alxgrn-fieldset-color-error: var(--alxgrn-color-error);--alxgrn-fieldset-color-top: var(--alxgrn-color-topbottom);--alxgrn-fieldset-color-bottom: var(--alxgrn-color-topbottom);--alxgrn-fieldset-color-disabled: var(--alxgrn-color-disabled);--alxgrn-fieldset-border: var(--alxgrn-color-accent);--alxgrn-fieldset-border-error: var(--alxgrn-color-error);--alxgrn-fieldset-border-disabled: gainsboro}.Form .Fieldset{display:block;margin:var(--alxgrn-unit) 0}.Form .Fieldset .FormItem{margin:0 0 var(--alxgrn-unit-half) 0}.Form .Fieldset .FormItem:last-child{margin-bottom:0}.Form .Fieldset .Label{color:var(--alxgrn-fieldset-color);margin-bottom:var(--alxgrn-unit-small)}.Form .Fieldset .Inner{border:1px solid var(--alxgrn-fieldset-border);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-small)}.Form .Fieldset .Top,.Form .Fieldset .Bottom{font-size:smaller}.Form .Fieldset .Top{color:var(--alxgrn-fieldset-color-top);margin-bottom:var(--alxgrn-unit-small)}.Form .Fieldset .Bottom{color:var(--alxgrn-fieldset-color-bottom);margin-top:var(--alxgrn-unit-small)}.Form .Fieldset.Disabled .Label,.Form .Fieldset.Disabled .Top,.Form .Fieldset.Disabled .Bottom{color:var(--alxgrn-fieldset-color-disabled)}.Form .Fieldset.Disabled .Inner{border-color:var(--alxgrn-fieldset-border-disabled)}.Form .Fieldset.Error .Label,.Form .Fieldset.Error .Top,.Form .Fieldset.Error .Bottom{color:var(--alxgrn-fieldset-color-error)}.Form .Fieldset.Error .Inner{border-color:var(--alxgrn-fieldset-border-error)}
+:root{--alxgrn-fieldset-color: var(--alxgrn-color-accent);--alxgrn-fieldset-color-error: var(--alxgrn-color-error);--alxgrn-fieldset-color-top: var(--alxgrn-color-light);--alxgrn-fieldset-color-bottom: var(--alxgrn-color-light);--alxgrn-fieldset-color-disabled: var(--alxgrn-color-light);--alxgrn-fieldset-border: var(--alxgrn-color-accent);--alxgrn-fieldset-border-error: var(--alxgrn-color-error);--alxgrn-fieldset-border-disabled: var(--alxgrn-border-light)}.Form .Fieldset{display:block;margin:var(--alxgrn-unit) 0}.Form .Fieldset .FormItem{margin:0 0 var(--alxgrn-unit-half) 0}.Form .Fieldset .FormItem:last-child{margin-bottom:0}.Form .Fieldset .Label{color:var(--alxgrn-fieldset-color);margin-bottom:var(--alxgrn-unit-small)}.Form .Fieldset .Inner{border:1px solid var(--alxgrn-fieldset-border);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-small)}.Form .Fieldset .Top,.Form .Fieldset .Bottom{font-size:smaller}.Form .Fieldset .Top{color:var(--alxgrn-fieldset-color-top);margin-bottom:var(--alxgrn-unit-small)}.Form .Fieldset .Bottom{color:var(--alxgrn-fieldset-color-bottom);margin-top:var(--alxgrn-unit-small)}.Form .Fieldset.Disabled .Label,.Form .Fieldset.Disabled .Top,.Form .Fieldset.Disabled .Bottom{color:var(--alxgrn-fieldset-color-disabled)}.Form .Fieldset.Disabled .Inner{border-color:var(--alxgrn-fieldset-border-disabled)}.Form .Fieldset.Error .Label,.Form .Fieldset.Error .Top,.Form .Fieldset.Error .Bottom{color:var(--alxgrn-fieldset-color-error)}.Form .Fieldset.Error .Inner{border-color:var(--alxgrn-fieldset-border-error)}

package/dist/assets/Files.css

@@ -1 +1 @@
-:root{--alxgrn-files-bg: var(--alxgrn-color-accent);--alxgrn-files-color: white;--alxgrn-files-bg-error: var(--alxgrn-color-error)}.Form ul.FileList{margin:0 0 var(--alxgrn-unit-half) 0;padding:0 0 0 var(--alxgrn-unit)}.Form ul.FileList li{cursor:pointer}.Form ul.FileList li div{display:flex;align-items:baseline;flex-wrap:nowrap;gap:var(--alxgrn-unit);justify-content:space-between;padding-left:var(--alxgrn-unit-small);margin-bottom:var(--alxgrn-unit-small)}.Form ul.FileList li div span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Form ul.FileList li div span:last-child{white-space:nowrap;font-size:smaller;color:var(--alxgrn-color-topbottom)}.Form ul.FileList.Disabled li{cursor:default}.Form ul.FileList.Disabled li div span{cursor:default;color:var(--alxgrn-color-disabled)}.Form ul.FileList li::marker{content:"■";color:var(--alxgrn-color-accent)}.Form ul.FileList li:hover::marker{content:"✖︎";color:var(--alxgrn-color-error)}.Form ul.FileList.Disabled li::marker{content:"■";color:var(--alxgrn-color-disabled)}.Form .FileLabel{display:flex;align-items:center;gap:var(--alxgrn-unit);flex-wrap:nowrap}.Form .FileLabel input[type=file]{display:none}.Form .FileLabel label{flex:0 0 auto;padding:var(--alxgrn-unit-half) var(--alxgrn-unit);border-radius:var(--alxgrn-unit-small);margin:0;cursor:pointer;color:var(--alxgrn-files-color);background-color:var(--alxgrn-files-bg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Form .FileLabel span{flex:1 1 auto;color:var(--alxgrn-color-topbottom);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Form .FileLabel.Disabled label{cursor:default;opacity:.5}.Form .FileLabel.Disabled span{color:var(--alxgrn-color-disabled)}.Form .FileLabel.Error label{background-color:var(--alxgrn-files-bg-error)}
+:root{--alxgrn-files-bg: var(--alxgrn-color-accent);--alxgrn-files-color: white;--alxgrn-files-bg-error: var(--alxgrn-color-error)}.Form ul.FileList{color:var(--alxgrn-color-text);margin:0 0 var(--alxgrn-unit-half) 0;padding:0 0 0 var(--alxgrn-unit)}.Form ul.FileList li{cursor:pointer}.Form ul.FileList li div{display:flex;align-items:baseline;flex-wrap:nowrap;gap:var(--alxgrn-unit);justify-content:space-between;padding-left:var(--alxgrn-unit-small);margin-bottom:var(--alxgrn-unit-small)}.Form ul.FileList li div span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Form ul.FileList li div span:last-child{white-space:nowrap;font-size:smaller;color:var(--alxgrn-color-light)}.Form ul.FileList.Disabled li{cursor:default}.Form ul.FileList.Disabled li div span{cursor:default;color:var(--alxgrn-color-light)}.Form ul.FileList li::marker{content:"■";color:var(--alxgrn-color-accent)}.Form ul.FileList li:hover::marker{content:"✖︎";color:var(--alxgrn-color-error)}.Form ul.FileList.Disabled li::marker{content:"■";color:var(--alxgrn-color-light)}.Form .FileLabel{display:flex;align-items:center;gap:var(--alxgrn-unit);flex-wrap:nowrap}.Form .FileLabel input[type=file]{display:none}.Form .FileLabel label{flex:0 0 auto;padding:var(--alxgrn-unit-half) var(--alxgrn-unit);border-radius:var(--alxgrn-unit-small);margin:0;cursor:pointer;color:var(--alxgrn-files-color);background-color:var(--alxgrn-files-bg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Form .FileLabel span{flex:1 1 auto;color:var(--alxgrn-color-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Form .FileLabel.Disabled label{cursor:default;opacity:.5}.Form .FileLabel.Disabled span{color:var(--alxgrn-color-light)}.Form .FileLabel.Error label{background-color:var(--alxgrn-files-bg-error)}

package/dist/assets/Form.css

@@ -1 +1 @@
-:root{--alxgrn-bg-input: aliceblue;--alxgrn-bg-focus: moccasin;--alxgrn-bg-error: #fee;--alxgrn-bg-button: gainsboro;--alxgrn-bg-success: #efe;--alxgrn-bg-disabled: whitesmoke;--alxgrn-color-text: #333;--alxgrn-color-error: firebrick;--alxgrn-color-accent: steelblue;--alxgrn-color-scroll: gainsboro;--alxgrn-color-button: lightslategrey;--alxgrn-color-success: forestgreen;--alxgrn-color-disabled: slategrey;--alxgrn-color-topbottom: slategrey;--alxgrn-unit: 1rem;--alxgrn-unit-half: .5rem;--alxgrn-unit-small: .25rem;--alxgrn-unit-double: 2rem;--alxgrn-unit-smallest: .125rem;--alxgrn-font-size: 1rem;--alxgrn-font-small: .8rem}:root{--alxgrn-form-width: 512px;--alxgrn-form-width-wide: 1024px;--alxgrn-form-info-bg: transparent;--alxgrn-form-info-color: #333;--alxgrn-form-info-border: transparent;--alxgrn-form-info-error-bg: #fee;--alxgrn-form-info-error-color: firebrick;--alxgrn-form-info-error-border: #fee;--alxgrn-form-info-success-bg: #efe;--alxgrn-form-info-success-color: forestgreen;--alxgrn-form-info-success-border: #efe}.Form{margin:var(--alxgrn-unit) 0;max-width:var(--alxgrn-form-width)}.Form.FormWide{max-width:var(--alxgrn-form-width-wide)}.Form *{font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Form .FormInfo{margin:var(--alxgrn-unit) 0;color:var(--alxgrn-form-info-color)}.Form .FormSuccess{margin:var(--alxgrn-unit) 0;padding:var(--alxgrn-unit-half);display:block;color:var(--alxgrn-form-info-success-color);background-color:var(--alxgrn-form-info-success-bg);border:1px solid var(--alxgrn-form-info-success-border);border-radius:var(--alxgrn-unit-small)}.Form .FormError{margin:var(--alxgrn-unit) 0;padding:var(--alxgrn-unit-half);display:block;color:var(--alxgrn-form-info-error-color);background-color:var(--alxgrn-form-info-error-bg);border:1px solid var(--alxgrn-form-info-error-border);border-radius:var(--alxgrn-unit-small)}.Form .FormItem{display:block;margin:var(--alxgrn-unit) 0}.FormSubmitButtons{margin-top:var(--alxgrn-unit-double);margin-bottom:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:var(--alxgrn-unit)}
+*{box-sizing:border-box;overflow-wrap:anywhere}:root{--alxgrn-unit: 16px;--alxgrn-unit-half: 8px;--alxgrn-unit-small: 4px;--alxgrn-unit-double: 32px;--alxgrn-unit-smallest: 2px;--alxgrn-font-size: 16px;--alxgrn-font-small: 12px;--alxgrn-line-height: 1.3;--alxgrn-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--alxgrn-color-text: #555;--alxgrn-color-dark: var(--alxgrn-color-text);--alxgrn-color-light: lightslategrey;--alxgrn-color-error: firebrick;--alxgrn-color-accent: steelblue;--alxgrn-color-active: moccasin;--alxgrn-color-success: forestgreen;--alxgrn-bg-main: #eee;--alxgrn-bg-panel: #fff;--alxgrn-bg-dark: #888;--alxgrn-bg-light: rgba(119, 136, 153, .1);--alxgrn-bg-error: rgba(178, 34, 34, .1);--alxgrn-bg-accent: rgba(70, 130, 180, .1);--alxgrn-bg-active: moccasin;--alxgrn-bg-success: rgba(34, 139, 34, .1);--alxgrn-border-light: rgba(119, 136, 153, .5)}[data-theme=dark]{--alxgrn-color-text: #999;--alxgrn-color-light: #666;--alxgrn-bg-main: #111;--alxgrn-bg-panel: #222}:root{--alxgrn-form-width: 512px;--alxgrn-form-width-wide: 1024px}.Form{max-width:var(--alxgrn-form-width)}.Form.FormWide{max-width:var(--alxgrn-form-width-wide)}.Form *{font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Form .FormItem{display:block;margin:var(--alxgrn-unit) 0}.FormSubmitButtons{margin-top:var(--alxgrn-unit-double);margin-bottom:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:var(--alxgrn-unit)}

package/dist/assets/Input.css

@@ -1 +1 @@
-:root{--alxgrn-input-bg: var(--alxgrn-bg-input);--alxgrn-input-color: var(--alxgrn-color-text);--alxgrn-input-border: var(--alxgrn-color-accent);--alxgrn-input-bg-focus: var(--alxgrn-bg-focus);--alxgrn-input-color-focus: var(--alxgrn-color-text);--alxgrn-input-border-focus: var(--alxgrn-color-accent);--alxgrn-input-bg-error: var(--alxgrn-bg-error);--alxgrn-input-color-error: var(--alxgrn-color-error);--alxgrn-input-border-error: var(--alxgrn-color-error);--alxgrn-input-bg-success: var(--alxgrn-bg-success);--alxgrn-input-color-success: var(--alxgrn-color-success);--alxgrn-input-border-success: var(--alxgrn-color-success);--alxgrn-input-bg-disabled: var(--alxgrn-bg-disabled);--alxgrn-input-color-disabled: var(--alxgrn-color-disabled);--alxgrn-input-border-disabled: lightgrey;--alxgrn-input-color-placeholder: lightslategrey}.FormItem input[type=text],.FormItem input[type=password],.FormItem textarea{color:var(--alxgrn-input-color);padding:var(--alxgrn-unit-half);margin:0;font-size:inherit;line-height:inherit;font-family:inherit;caret-color:var(--alxgrn-input-border);border-radius:var(--alxgrn-unit-small);border:1px solid var(--alxgrn-input-border);width:100%;display:block;background-color:var(--alxgrn-input-bg);appearance:none;-moz-appearance:none;-webkit-appearance:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.FormItem textarea{resize:vertical}.FormItem input[type=text]:focus,.FormItem input[type=password]:focus,.FormItem textarea:focus{outline:none;color:var(--alxgrn-input-color-focus);background-color:var(--alxgrn-input-bg-focus);border:1px solid var(--alxgrn-input-border-focus);caret-color:var(--alxgrn-input-border-focus)}.FormItem input[type=text]::placeholder,.FormItem input[type=password]::placeholder,.FormItem textarea::placeholder{color:var(--alxgrn-input-color-placeholder);font-size:var(--alxgrn-unit)}.FormItem input[type=text]:disabled,.FormItem input[type=password]:disabled,.FormItem textarea:disabled{color:var(--alxgrn-input-color-disabled);border-color:var(--alxgrn-input-border-disabled);background-color:var(--alxgrn-input-bg-disabled);cursor:default;caret-color:var(--alxgrn-input-border-disabled)}.FormItem input:read-only{cursor:pointer}
+:root{--alxgrn-input-bg: var(--alxgrn-bg-accent);--alxgrn-input-color: var(--alxgrn-color-text);--alxgrn-input-border: var(--alxgrn-color-accent);--alxgrn-input-bg-focus: var(--alxgrn-bg-active);--alxgrn-input-color-focus: var(--alxgrn-color-text);--alxgrn-input-border-focus: var(--alxgrn-color-accent);--alxgrn-input-bg-error: var(--alxgrn-bg-error);--alxgrn-input-color-error: var(--alxgrn-color-error);--alxgrn-input-border-error: var(--alxgrn-color-error);--alxgrn-input-bg-success: var(--alxgrn-bg-success);--alxgrn-input-color-success: var(--alxgrn-color-success);--alxgrn-input-border-success: var(--alxgrn-color-success);--alxgrn-input-bg-disabled: var(--alxgrn-bg-light);--alxgrn-input-color-disabled: var(--alxgrn-color-light);--alxgrn-input-border-disabled: var(--alxgrn-border-light);--alxgrn-input-color-placeholder: lightslategrey}.FormItem input[type=text],.FormItem input[type=password],.FormItem textarea{color:var(--alxgrn-input-color);padding:var(--alxgrn-unit-half);margin:0;font-size:inherit;line-height:inherit;font-family:inherit;caret-color:var(--alxgrn-input-border);border-radius:var(--alxgrn-unit-small);border:1px solid var(--alxgrn-input-border);width:100%;display:block;background-color:var(--alxgrn-input-bg);appearance:none;-moz-appearance:none;-webkit-appearance:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.FormItem textarea{resize:vertical}.FormItem input[type=text]:focus,.FormItem input[type=password]:focus,.FormItem textarea:focus{outline:none;color:var(--alxgrn-input-color-focus);background-color:var(--alxgrn-input-bg-focus);border:1px solid var(--alxgrn-input-border-focus);caret-color:var(--alxgrn-input-border-focus)}.FormItem input[type=text]::placeholder,.FormItem input[type=password]::placeholder,.FormItem textarea::placeholder{color:var(--alxgrn-input-color-placeholder);font-size:var(--alxgrn-unit)}.FormItem input[type=text]:disabled,.FormItem input[type=password]:disabled,.FormItem textarea:disabled{color:var(--alxgrn-input-color-disabled);border-color:var(--alxgrn-input-border-disabled);background-color:var(--alxgrn-input-bg-disabled);cursor:default;caret-color:var(--alxgrn-input-border-disabled)}.FormItem input:read-only{cursor:pointer}

package/dist/assets/Label.css

@@ -1 +1 @@
-:root{--alxgrn-label-color: var(--alxgrn-color-accent);--alxgrn-label-color-error: var(--alxgrn-color-error);--alxgrn-label-color-top: var(--alxgrn-color-topbottom);--alxgrn-label-color-bottom: var(--alxgrn-color-topbottom);--alxgrn-label-color-disabled: var(--alxgrn-color-disabled)}.FormItem label{color:var(--alxgrn-label-color);display:block;-webkit-user-select:none;user-select:none;padding:0}.FormItem label .Label{margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Top,.FormItem label .Bottom{font-size:smaller}.FormItem label .Top{color:var(--alxgrn-label-color-top);margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Bottom{color:var(--alxgrn-label-color-bottom);margin-top:var(--alxgrn-unit-small)}.FormItem label.Disabled,.FormItem label.Disabled .Top,.FormItem label.Disabled .Bottom{color:var(--alxgrn-label-color-disabled)}.FormItem label.Error,.FormItem label.Error .Top,.FormItem label.Error .Bottom{color:var(--alxgrn-label-color-error)}
+:root{--alxgrn-label-color: var(--alxgrn-color-accent);--alxgrn-label-color-error: var(--alxgrn-color-error);--alxgrn-label-color-top: var(--alxgrn-color-light);--alxgrn-label-color-bottom: var(--alxgrn-color-light);--alxgrn-label-color-disabled: var(--alxgrn-color-light)}.FormItem label{color:var(--alxgrn-label-color);display:block;-webkit-user-select:none;user-select:none;padding:0}.FormItem label .Label{margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Top,.FormItem label .Bottom{font-size:smaller}.FormItem label .Top{color:var(--alxgrn-label-color-top);margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Bottom{color:var(--alxgrn-label-color-bottom);margin-top:var(--alxgrn-unit-small)}.FormItem label.Disabled,.FormItem label.Disabled .Top,.FormItem label.Disabled .Bottom{color:var(--alxgrn-label-color-disabled)}.FormItem label.Error,.FormItem label.Error .Top,.FormItem label.Error .Bottom{color:var(--alxgrn-label-color-error)}

package/dist/assets/Menu.css

@@ -1 +1 @@
-:root{--alxgrn-menu-bg-hover: var(--alxgrn-bg-focus);--alxgrn-menu-color-scroll: var(--alxgrn-color-scroll);--alxgrn-menu-color-separator: var(--alxgrn-color-scroll)}.Popup .Menu{position:relative;overflow:auto;margin:var(--alxgrn-unit-small);margin-right:var(--alxgrn-unit-smallest);width:100%}.Popup .Menu ul{margin:0;padding:0 var(--alxgrn-unit-smallest) 0 0;list-style-type:none}.Popup .Menu ul li{display:flex;cursor:pointer;align-items:center;color:var(--alxgrn-color-text);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-small);white-space:nowrap;gap:var(--alxgrn-unit-half)}.Popup .Menu ul li .Icon{flex:0 0 auto;font-size:larger;display:flex}.Popup .Menu ul li .Text{flex:1 1 auto;font-size:smaller;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Popup .Menu ul li:hover{background-color:var(--alxgrn-menu-bg-hover)}.Popup .Menu ul li:hover .Icon{color:var(--alxgrn-color-accent)}.Popup .Menu ul li.Separator{cursor:auto;padding:0;margin:var(--alxgrn-unit-half) var(--alxgrn-unit-small);border-top:1px solid var(--alxgrn-menu-color-separator);border-radius:0;height:0;overflow:hidden}.Popup .Menu ul li.Separator:hover{background-color:transparent}.Popup .Menu ul li.Disabled{color:var(--alxgrn-color-disabled);cursor:default}.Popup .Menu{scrollbar-color:transparent var(--alxgrn-menu-color-scroll);scrollbar-width:thin}.Popup .Menu::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Popup .Menu::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Popup .Menu::-webkit-scrollbar-thumb{background-color:var(--alxgrn-menu-color-scroll);border-radius:var(--alxgrn-unit-small)}.Popup .Menu::-webkit-scrollbar-corner{background-color:transparent}
+:root{--alxgrn-menu-bg-hover: var(--alxgrn-bg-active);--alxgrn-menu-color-scroll: var(--alxgrn-color-light);--alxgrn-menu-color-separator: var(--alxgrn-color-light)}.Popup .Menu{position:relative;overflow:auto;margin:var(--alxgrn-unit-small);margin-right:var(--alxgrn-unit-smallest);width:100%}.Popup .Menu ul{margin:0;padding:0 var(--alxgrn-unit-smallest) 0 0;list-style-type:none}.Popup .Menu ul li{display:flex;cursor:pointer;align-items:center;color:var(--alxgrn-color-text);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-small);white-space:nowrap;gap:var(--alxgrn-unit-half)}.Popup .Menu ul li .Icon{flex:0 0 auto;font-size:larger;display:flex}.Popup .Menu ul li .Text{flex:1 1 auto;font-size:smaller;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Popup .Menu ul li:hover{background-color:var(--alxgrn-menu-bg-hover)}.Popup .Menu ul li:hover .Icon{color:var(--alxgrn-color-accent)}.Popup .Menu ul li.Separator{cursor:auto;padding:0;margin:var(--alxgrn-unit-half) var(--alxgrn-unit-small);border-top:1px solid var(--alxgrn-menu-color-separator);border-radius:0;height:0;overflow:hidden}.Popup .Menu ul li.Separator:hover{background-color:transparent}.Popup .Menu ul li.Disabled{color:var(--alxgrn-color-disabled);cursor:default}.Popup .Menu{scrollbar-color:transparent var(--alxgrn-menu-color-scroll);scrollbar-width:thin}.Popup .Menu::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Popup .Menu::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Popup .Menu::-webkit-scrollbar-thumb{background-color:var(--alxgrn-menu-color-scroll);border-radius:var(--alxgrn-unit-small)}.Popup .Menu::-webkit-scrollbar-corner{background-color:transparent}

package/dist/assets/Modal.css

@@ -1 +1 @@
-:root{--alxgrn-modal-zindex: 1000;--alxgrn-modal-shadow: 0 0 var(--alxgrn-unit-half) rgba(0,0,0,.1);--alxgrn-modal-bg-color: white;--alxgrn-modal-animation-length: .1s;--alxgrn-modal-width: 512px;--alxgrn-modal-color-close: var(--alxgrn-color-disabled);--alxgrn-modal-color-accent: var(--alxgrn-color-accent);--alxgrn-modal-color-scroll: var(--alxgrn-color-scroll)}.Modal{z-index:var(--alxgrn-modal-zindex);position:fixed;top:0;left:0;right:0;bottom:0;padding:var(--alxgrn-unit);background-color:#00000080;overflow:hidden;display:flex;align-items:center;justify-content:center}.Modal *{font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Modal .ModalInner{display:flex;padding:var(--alxgrn-unit-double) var(--alxgrn-unit) var(--alxgrn-unit-double) var(--alxgrn-unit-double);position:relative;background-color:var(--alxgrn-modal-bg-color);width:var(--alxgrn-modal-width);max-height:100%;border-radius:var(--alxgrn-unit);overflow:auto}.Modal .ModalInner .ModalContent{width:100%;overflow:auto;padding-right:var(--alxgrn-unit)}.Modal .ModalInner .ModalContent .Form{max-width:100%;margin-bottom:0}.Modal .ModalInner .ModalClose{position:absolute;top:var(--alxgrn-unit);right:var(--alxgrn-unit);width:var(--alxgrn-unit);height:var(--alxgrn-unit);cursor:pointer}.Modal .ModalInner .ModalClose span{position:absolute;background-color:var(--alxgrn-modal-color-close);display:inline-block;border-radius:2px;width:2px;height:var(--alxgrn-unit);top:0;left:0;transform:translate(var(--alxgrn-unit-half)) rotate(45deg)}.Modal .ModalInner .ModalClose span:nth-child(2){transform:translate(var(--alxgrn-unit-half)) rotate(135deg)}.Modal .ModalInner .ModalClose:hover span{background-color:var(--alxgrn-modal-color-accent)}@media (max-width: 512px){.Modal .ModalInner{width:100%;border-radius:var(--alxgrn-unit-half);padding:calc(var(--alxgrn-unit-half) * 3) var(--alxgrn-unit-half) var(--alxgrn-unit) var(--alxgrn-unit)}.Modal .ModalInner .ModalClose{top:var(--alxgrn-unit-half);right:var(--alxgrn-unit-half)}.Modal .ModalInner .ModalContent{padding-right:var(--alxgrn-unit-half)}}.Modal-enter{pointer-events:none;background-color:#0000}.Modal-enter-active{pointer-events:none;background-color:#00000080;transition:background-color var(--alxgrn-modal-animation-length) ease-in}.Modal-enter-done{pointer-events:auto;background-color:#00000080}.Modal-exit{pointer-events:none;background-color:#00000080}.Modal-exit-active{pointer-events:none;background-color:#0000;transition:background-color var(--alxgrn-modal-animation-length) ease-out}.Modal-exit-done{pointer-events:auto;background-color:#0000}.Modal-enter .ModalInner{pointer-events:none;opacity:0;transform:scale(.8)}.Modal-enter-active .ModalInner{pointer-events:none;opacity:1;transform:scale(1);transition:opacity var(--alxgrn-modal-animation-length) ease-in,transform var(--alxgrn-modal-animation-length) ease-in}.Modal-exit .ModalInner{pointer-events:none;opacity:1;transform:scale(1)}.Modal-exit-active .ModalInner{pointer-events:none;opacity:0;transform:scale(.8);transition:opacity var(--alxgrn-modal-animation-length) ease-out,transform var(--alxgrn-modal-animation-length) ease-out}.Modal .ModalInner .ModalContent{scrollbar-color:transparent var(--alxgrn-modal-color-scroll);scrollbar-width:thin}.Modal .ModalInner .ModalContent::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Modal .ModalInner .ModalContent::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Modal .ModalInner .ModalContent::-webkit-scrollbar-thumb{background-color:var(--alxgrn-modal-color-scroll);border-radius:var(--alxgrn-unit-small)}.Modal .ModalInner .ModalContent::-webkit-scrollbar-corner{background-color:transparent}
+:root{--alxgrn-modal-zindex: 1000;--alxgrn-modal-shadow: 0 0 var(--alxgrn-unit-half) rgba(0,0,0,.1);--alxgrn-modal-bg-color: var(--alxgrn-bg-panel);--alxgrn-modal-animation-length: .1s;--alxgrn-modal-width: 512px;--alxgrn-modal-color-close: var(--alxgrn-color-light);--alxgrn-modal-color-accent: var(--alxgrn-color-accent);--alxgrn-modal-color-scroll: var(--alxgrn-color-light)}.Modal{z-index:var(--alxgrn-modal-zindex);position:fixed;top:0;left:0;right:0;bottom:0;padding:var(--alxgrn-unit);background-color:#00000080;overflow:hidden;display:flex;align-items:center;justify-content:center}.Modal *{font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Modal .ModalInner{display:flex;padding:var(--alxgrn-unit-double) var(--alxgrn-unit) var(--alxgrn-unit-double) var(--alxgrn-unit-double);position:relative;background-color:var(--alxgrn-modal-bg-color);width:var(--alxgrn-modal-width);max-height:100%;border-radius:var(--alxgrn-unit-half);overflow:auto}.Modal .ModalInner .ModalContent{width:100%;overflow:auto;padding-right:var(--alxgrn-unit)}.Modal .ModalInner .ModalContent .Form{max-width:100%;margin-bottom:0}.Modal .ModalInner .ModalClose{position:absolute;top:var(--alxgrn-unit);right:var(--alxgrn-unit);width:var(--alxgrn-unit);height:var(--alxgrn-unit);cursor:pointer}.Modal .ModalInner .ModalClose span{position:absolute;background-color:var(--alxgrn-modal-color-close);display:inline-block;border-radius:2px;width:2px;height:var(--alxgrn-unit);top:0;left:0;transform:translate(var(--alxgrn-unit-half)) rotate(45deg)}.Modal .ModalInner .ModalClose span:nth-child(2){transform:translate(var(--alxgrn-unit-half)) rotate(135deg)}.Modal .ModalInner .ModalClose:hover span{background-color:var(--alxgrn-modal-color-accent)}@media (max-width: 512px){.Modal .ModalInner{width:100%;border-radius:var(--alxgrn-unit-half);padding:calc(var(--alxgrn-unit-half) * 3) var(--alxgrn-unit-half) var(--alxgrn-unit) var(--alxgrn-unit)}.Modal .ModalInner .ModalClose{top:var(--alxgrn-unit-half);right:var(--alxgrn-unit-half)}.Modal .ModalInner .ModalContent{padding-right:var(--alxgrn-unit-half)}}.Modal-enter{pointer-events:none;background-color:#0000}.Modal-enter-active{pointer-events:none;background-color:#00000080;transition:background-color var(--alxgrn-modal-animation-length) ease-in}.Modal-enter-done{pointer-events:auto;background-color:#00000080}.Modal-exit{pointer-events:none;background-color:#00000080}.Modal-exit-active{pointer-events:none;background-color:#0000;transition:background-color var(--alxgrn-modal-animation-length) ease-out}.Modal-exit-done{pointer-events:auto;background-color:#0000}.Modal-enter .ModalInner{pointer-events:none;opacity:0;transform:scale(.8)}.Modal-enter-active .ModalInner{pointer-events:none;opacity:1;transform:scale(1);transition:opacity var(--alxgrn-modal-animation-length) ease-in,transform var(--alxgrn-modal-animation-length) ease-in}.Modal-exit .ModalInner{pointer-events:none;opacity:1;transform:scale(1)}.Modal-exit-active .ModalInner{pointer-events:none;opacity:0;transform:scale(.8);transition:opacity var(--alxgrn-modal-animation-length) ease-out,transform var(--alxgrn-modal-animation-length) ease-out}.Modal .ModalInner .ModalContent{scrollbar-color:transparent var(--alxgrn-modal-color-scroll);scrollbar-width:thin}.Modal .ModalInner .ModalContent::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Modal .ModalInner .ModalContent::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Modal .ModalInner .ModalContent::-webkit-scrollbar-thumb{background-color:var(--alxgrn-modal-color-scroll);border-radius:var(--alxgrn-unit-small)}.Modal .ModalInner .ModalContent::-webkit-scrollbar-corner{background-color:transparent}

package/dist/assets/Panel.css

@@ -0,0 +1 @@
+.Panel{background-color:var(--alxgrn-bg-panel);border-radius:var(--alxgrn-unit-half);padding:var(--alxgrn-unit-double);margin:var(--alxgrn-unit) 0}.Panel:first-child{margin-top:0}.Panel:last-child{margin-bottom:0}.Panel p:first-child,.Panel .p:first-child{margin-top:0}.Panel p:last-child,.Panel .p:last-child{margin-bottom:0}@media (max-width: 512px){.Panel{padding:var(--alxgrn-unit)}}

package/dist/assets/RadioLabel.css

@@ -1 +1 @@
-.Form label.Radio{width:auto;display:block;-webkit-user-select:none;user-select:none;padding:0;cursor:pointer;margin-bottom:var(--alxgrn-unit-half)}.Form label.Radio:last-child{margin-bottom:0}.Form label.Radio .Bottom{font-size:smaller;color:var(--alxgrn-color-topbottom);cursor:default}.Form label.Radio.Disabled,.Form label.Radio.Disabled .Bottom{color:var(--alxgrn-color-disabled);cursor:default}.Form label.Radio.Error,.Form label.Radio.Error .Bottom{color:var(--alxgrn-color-error)}.Form label.Radio{display:flex;width:fit-content;align-items:flex-start}.Form label.Radio s,.Form label.Radio input{flex:0 0 auto}.Form label.Radio div{flex:1 1 auto}.Form label.Radio input{display:none}.Form label.Radio s{width:var(--alxgrn-unit);height:var(--alxgrn-unit);border:1px solid var(--alxgrn-color-accent);padding:2px;background-clip:content-box;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:var(--alxgrn-unit-smallest) var(--alxgrn-unit-half) 0 0;text-decoration:none}.Form label.Radio input[type=radio]+s{border-radius:50%}.Form label.Radio input[type=checkbox]+s{border-radius:var(--alxgrn-unit-small)}.Form label.Radio.Disabled s{opacity:.5;border:1px solid var(--alxgrn-color-disabled)}.Form label.Radio.Disabled.Checked s{background-color:var(--alxgrn-color-disabled)}.Form label.Radio.Checked s{background-color:var(--alxgrn-color-accent)}.Form label.Radio.Error s{border:1px solid var(--alxgrn-color-error)}.Form label.Radio.Error.Checked s{background-color:var(--alxgrn-color-error)}
+.Form label.Radio{color:var(--alxgrn-color-text);width:auto;display:block;-webkit-user-select:none;user-select:none;padding:0;cursor:pointer;margin-bottom:var(--alxgrn-unit-half)}.Form label.Radio:last-child{margin-bottom:0}.Form label.Radio .Bottom{font-size:smaller;color:var(--alxgrn-color-light);cursor:default}.Form label.Radio.Disabled,.Form label.Radio.Disabled .Bottom{color:var(--alxgrn-color-light);cursor:default}.Form label.Radio.Error,.Form label.Radio.Error .Bottom{color:var(--alxgrn-color-error)}.Form label.Radio{display:flex;width:fit-content;align-items:flex-start}.Form label.Radio s,.Form label.Radio input{flex:0 0 auto}.Form label.Radio div{flex:1 1 auto}.Form label.Radio input{display:none}.Form label.Radio s{width:var(--alxgrn-unit);height:var(--alxgrn-unit);border:1px solid var(--alxgrn-color-accent);padding:2px;background-clip:content-box;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:var(--alxgrn-unit-smallest) var(--alxgrn-unit-half) 0 0;text-decoration:none}.Form label.Radio input[type=radio]+s{border-radius:50%}.Form label.Radio input[type=checkbox]+s{border-radius:var(--alxgrn-unit-small)}.Form label.Radio.Disabled s{opacity:.5;border:1px solid var(--alxgrn-color-light)}.Form label.Radio.Disabled.Checked s{background-color:var(--alxgrn-color-light)}.Form label.Radio.Checked s{background-color:var(--alxgrn-color-accent)}.Form label.Radio.Error s{border:1px solid var(--alxgrn-color-error)}.Form label.Radio.Error.Checked s{background-color:var(--alxgrn-color-error)}

package/dist/assets/Select.css

@@ -1 +1 @@
-:root{--alxgrn-input-bg: var(--alxgrn-bg-input);--alxgrn-input-color: var(--alxgrn-color-text);--alxgrn-input-border: var(--alxgrn-color-accent);--alxgrn-input-bg-focus: var(--alxgrn-bg-focus);--alxgrn-input-color-focus: var(--alxgrn-color-text);--alxgrn-input-border-focus: var(--alxgrn-color-accent);--alxgrn-input-bg-error: var(--alxgrn-bg-error);--alxgrn-input-color-error: var(--alxgrn-color-error);--alxgrn-input-border-error: var(--alxgrn-color-error);--alxgrn-input-bg-success: var(--alxgrn-bg-success);--alxgrn-input-color-success: var(--alxgrn-color-success);--alxgrn-input-border-success: var(--alxgrn-color-success);--alxgrn-input-bg-disabled: var(--alxgrn-bg-disabled);--alxgrn-input-color-disabled: var(--alxgrn-color-disabled);--alxgrn-input-border-disabled: lightgrey}.FormItem select{color:var(--alxgrn-input-color);padding:var(--alxgrn-unit-half);margin:0;font-size:inherit;line-height:inherit;font-family:inherit;border-radius:var(--alxgrn-unit-small);border:1px solid var(--alxgrn-input-border);width:100%;display:block;background-color:var(--alxgrn-input-bg);appearance:none;-moz-appearance:none;-webkit-appearance:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.FormItem select:focus{outline:none;color:var(--alxgrn-input-color-focus);background-color:var(--alxgrn-input-bg-focus);border:1px solid var(--alxgrn-input-border-focus)}.FormItem select:disabled{color:var(--alxgrn-input-color-disabled);border-color:var(--alxgrn-input-border-disabled);background-color:var(--alxgrn-input-bg-disabled);cursor:default}.FormItem select{padding-right:var(--alxgrn-unit-double);cursor:pointer}.FormItem .SelectWrap{position:relative}.FormItem .SelectWrap:before{content:"";position:absolute;width:0;height:0;border:var(--alxgrn-unit-small) solid transparent;border-top-color:var(--alxgrn-input-border);top:var(--alxgrn-unit);right:calc(var(--alxgrn-unit) - var(--alxgrn-unit-small));cursor:pointer;pointer-events:none}.FormItem .SelectWrap.Disabled:before{border-top-color:var(--alxgrn-input-border-disabled);cursor:default}.FormItem .SelectWrap.Error:before{border-top-color:var(--alxgrn-input-border-error)}
+:root{--alxgrn-select-bg: var(--alxgrn-bg-accent);--alxgrn-select-color: var(--alxgrn-color-text);--alxgrn-select-border: var(--alxgrn-color-accent);--alxgrn-select-bg-focus: var(--alxgrn-bg-active);--alxgrn-select-color-focus: var(--alxgrn-color-text);--alxgrn-select-border-focus: var(--alxgrn-color-accent);--alxgrn-select-bg-error: var(--alxgrn-bg-error);--alxgrn-select-color-error: var(--alxgrn-color-error);--alxgrn-select-border-error: var(--alxgrn-color-error);--alxgrn-select-bg-success: var(--alxgrn-bg-success);--alxgrn-select-color-success: var(--alxgrn-color-success);--alxgrn-select-border-success: var(--alxgrn-color-success);--alxgrn-select-bg-disabled: var(--alxgrn-bg-light);--alxgrn-select-color-disabled: var(--alxgrn-color-light);--alxgrn-select-border-disabled: var(--alxgrn-border-light)}.FormItem select{color:var(--alxgrn-select-color);padding:var(--alxgrn-unit-half);margin:0;font-size:inherit;line-height:inherit;font-family:inherit;border-radius:var(--alxgrn-unit-small);border:1px solid var(--alxgrn-select-border);width:100%;display:block;background-color:var(--alxgrn-select-bg);appearance:none;-moz-appearance:none;-webkit-appearance:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.FormItem select:focus{outline:none;color:var(--alxgrn-select-color-focus);background-color:var(--alxgrn-select-bg-focus);border:1px solid var(--alxgrn-select-border-focus)}.FormItem select:disabled{color:var(--alxgrn-select-color-disabled);border-color:var(--alxgrn-select-border-disabled);background-color:var(--alxgrn-select-bg-disabled);cursor:default}.FormItem select{padding-right:var(--alxgrn-unit-double);cursor:pointer}.FormItem .SelectWrap{position:relative}.FormItem .SelectWrap:before{content:"";position:absolute;width:0;height:0;border:var(--alxgrn-unit-small) solid transparent;border-top-color:var(--alxgrn-select-border);top:var(--alxgrn-unit);right:calc(var(--alxgrn-unit) - var(--alxgrn-unit-small));cursor:pointer;pointer-events:none}.FormItem .SelectWrap.Disabled:before{border-top-color:var(--alxgrn-select-border-disabled);cursor:default}.FormItem .SelectWrap.Error:before{border-top-color:var(--alxgrn-select-border-error)}

package/dist/components/form/Form.js

@@ -1,149 +1,151 @@
-import { jsxs as b, jsx as c } from "react/jsx-runtime";
-import { useState as L, useEffect as g } from "react";
-import { deepForEach as h } from "react-children-utilities";
-import F, { isValidDate as q } from "../date/Date.js";
-import y from "../button/Button.js";
-import H from "../time/Time.js";
-import { Files as x } from "../files/Files.js";
-import C from "../input/Input.js";
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { useState as g, useEffect as q } from "react";
+import { deepForEach as y } from "react-children-utilities";
+import x, { isValidDate as H } from "../date/Date.js";
+import F from "../button/Button.js";
+import R from "../time/Time.js";
+import { Files as C } from "../files/Files.js";
+import E from "../input/Input.js";
 import "../label/Label.js";
-import { RadioList as E } from "../radio/RadioList.js";
+import { RadioList as D } from "../radio/RadioList.js";
 import { Select as I } from "../select/Select.js";
-import R from "../hidden/Hidden.js";
-import N from "../checkbox/Checkbox.js";
-import { CheckboxList as D } from "../checkbox/CheckboxList.js";
+import T from "../hidden/Hidden.js";
+import B from "../checkbox/Checkbox.js";
+import { CheckboxList as S } from "../checkbox/CheckboxList.js";
 import "../fieldset/Fieldset.js";
-import '../../assets/Editable.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Form.css';/* empty css                     */
+import '../../assets/Editable.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Panel.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Form.css';/* empty css                     */
 /* empty css                     */
 import "../date/DatePicker.js";
 import "react-transition-group";
 import "react-dom";
 import "../ui/popup/Popup.js";
 import "../ui/menu/Menu.js";
+import l from "../ui/block/Block.js";
+/* empty css                   */
 /* empty css                   */
 /* empty css                     */
 /* empty css                      */
-const pe = ({
-  info: l,
-  error: u,
-  success: d,
-  submit: n,
+const le = ({
+  info: u,
+  error: d,
+  success: k,
+  submit: p,
   cancel: f,
-  submitType: S = "Accent",
-  cancelType: j = "Error",
-  wide: w,
-  onSubmit: k,
-  onCancel: A,
-  children: p
+  submitType: j = "Accent",
+  cancelType: w = "Error",
+  wide: A,
+  onSubmit: b,
+  onCancel: L,
+  children: c
 }) => {
-  const [B, i] = L(!1);
-  return g(() => {
-    n && (i(!1), h(p, (t) => {
-      if (!t) return;
-      const r = t;
+  const [N, i] = g(!1);
+  return q(() => {
+    p && (i(!1), y(c, (o) => {
+      if (!o) return;
+      const r = o;
       if (typeof r.type != "function") return;
       const e = r.props;
       if (e.required)
         switch (r.type) {
-          case C:
+          case E:
             e.value.trim() || i(!0);
             break;
-          case N:
+          case B:
             e.checked || i(!0);
             break;
           case I:
             {
-              const o = e.value;
-              e.options.findIndex((m) => m.value === o) < 0 && i(!0);
+              const t = e.value;
+              e.options.findIndex((m) => m.value === t) < 0 && i(!0);
             }
             break;
-          case E:
+          case D:
             {
-              const o = e.value;
-              e.options.findIndex((m) => m.value === o) < 0 && i(!0);
+              const t = e.value;
+              e.options.findIndex((m) => m.value === t) < 0 && i(!0);
             }
             break;
-          case x:
+          case C:
             e.files.length < 1 && i(!0);
             break;
-          case F:
-            q(e.value.trim()) || i(!0);
+          case x:
+            H(e.value.trim()) || i(!0);
             break;
-          case D:
+          case S:
             e.options.findIndex((a) => a.checked === !0) < 0 && i(!0);
             break;
         }
     }));
-  }, [p, n]), /* @__PURE__ */ b("div", { className: w ? "Form FormWide" : "Form", children: [
-    d && /* @__PURE__ */ c("div", { className: "FormSuccess", children: d }),
-    u && /* @__PURE__ */ c("div", { className: "FormError", children: u }),
-    l && /* @__PURE__ */ c("div", { className: "FormInfo", children: l }),
-    p,
-    (n || f) && /* @__PURE__ */ b("div", { className: "FormSubmitButtons", children: [
-      n && /* @__PURE__ */ c(
-        y,
+  }, [c, p]), /* @__PURE__ */ h("div", { className: A ? "Form FormWide" : "Form", children: [
+    k && /* @__PURE__ */ n(l, { type: "Success", children: k }),
+    d && /* @__PURE__ */ n(l, { type: "Error", children: d }),
+    u && /* @__PURE__ */ n(l, { children: u }),
+    c,
+    (p || f) && /* @__PURE__ */ h("div", { className: "FormSubmitButtons", children: [
+      p && /* @__PURE__ */ n(
+        F,
         {
-          type: S,
-          label: n,
-          disabled: B,
+          type: j,
+          label: p,
+          disabled: N,
           onClick: () => {
-            if (!k) return;
-            const t = {}, r = (e, s) => {
-              if (!t[e]) {
-                t[e] = s;
+            if (!b) return;
+            const o = {}, r = (e, s) => {
+              if (!o[e]) {
+                o[e] = s;
                 return;
               }
-              t[e] instanceof Array ? t[e].push(s) : t[e] = [t[e], s];
+              o[e] instanceof Array ? o[e].push(s) : o[e] = [o[e], s];
             };
-            h(p, (e) => {
+            y(c, (e) => {
               if (!e) return;
               const s = e;
               if (typeof s.type != "function") return;
-              const o = s.props;
+              const t = s.props;
               switch (s.type) {
-                case F:
-                case H:
-                case C:
-                  r(o.id, o.value.trim());
+                case x:
+                case R:
+                case E:
+                  r(t.id, t.value.trim());
                   break;
-                case N:
-                  r(o.id, o.checked ? o.value : void 0);
+                case B:
+                  r(t.id, t.checked ? t.value : void 0);
                   break;
                 case I:
-                case E:
-                  r(o.id, o.value);
+                case D:
+                  r(t.id, t.value);
                   break;
-                case x:
-                  r(o.id, o.files);
+                case C:
+                  r(t.id, t.files);
                   break;
-                case R:
-                  r(o.id, o.value);
+                case T:
+                  r(t.id, t.value);
                   break;
-                case D:
+                case S:
                   {
                     const a = [];
-                    o.options.forEach((v) => {
+                    t.options.forEach((v) => {
                       v.checked && a.push(v.value);
-                    }), r(o.id, a);
+                    }), r(t.id, a);
                   }
                   break;
               }
-            }), k(t);
+            }), b(o);
           }
         }
       ),
-      f && /* @__PURE__ */ c(
-        y,
+      f && /* @__PURE__ */ n(
+        F,
         {
-          type: j,
+          type: w,
           label: f,
-          onClick: A
+          onClick: L
         }
       )
     ] })
   ] });
 };
 export {
-  pe as Form,
-  pe as default
+  le as Form,
+  le as default
 };

package/dist/components/ui/block/Block.d.ts

@@ -0,0 +1,8 @@
+import { default as React, PropsWithChildren } from 'react';
+export type BlockType = 'Error' | 'Success' | 'Accent' | 'Default';
+export type BlockProps = {
+    type?: BlockType;
+    className?: string;
+};
+declare const Block: React.FC<PropsWithChildren<BlockProps>>;
+export default Block;

package/dist/components/ui/block/Block.js

@@ -0,0 +1,5 @@
+import { jsx as t } from "react/jsx-runtime";
+import '../../../assets/Block.css';const a = ({ children: r, type: o = "Default", className: l }) => /* @__PURE__ */ t("div", { className: l ? `Block ${o} ${l}` : `Block ${o}`, children: r });
+export {
+  a as default
+};

package/dist/components/ui/panel/Panel.d.ts

@@ -0,0 +1,7 @@
+import { default as React, MouseEvent, PropsWithChildren } from 'react';
+type PanelProps = {
+    className?: string;
+    onClick?: (e: MouseEvent) => void;
+};
+declare const Panel: React.FC<PropsWithChildren<PanelProps>>;
+export default Panel;

package/dist/components/ui/panel/Panel.js

@@ -0,0 +1,15 @@
+import { jsx as n } from "react/jsx-runtime";
+import '../../../assets/Panel.css';/* empty css                      */
+const l = ({ children: t, className: e, onClick: r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: e ? `Panel ${e}` : "Panel",
+    onClick: (a) => {
+      r && r(a);
+    },
+    children: t
+  }
+);
+export {
+  l as default
+};

package/dist/main.d.ts

@@ -15,6 +15,8 @@ import { default as FormRow } from './components/form/FormRow';
 import { default as FormCol } from './components/form/FormCol';
 import { default as DatePicker } from './components/date/DatePicker';
 import { Menu, MenuItem } from './components/ui/menu/Menu';
+import { default as Block } from './components/ui/block/Block';
+import { default as Panel } from './components/ui/panel/Panel';
 import { default as Modal } from './components/ui/modal/Modal';
 import { default as Popup } from './components/ui/popup/Popup';
 import { default as Portal } from './components/ui/portal/Portal';
@@ -23,5 +25,5 @@ import { default as Alert } from './components/ui/alert/Alert';
 import { default as Confirm } from './components/ui/confirm/Confirm';
 import { default as Prompt } from './components/ui/prompt/Prompt';
 import { default as Editable } from './components/ui/editable/Editable';
-export { Form, Date, Time, Files, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Modal, Popup, Portal, Message, Alert, Confirm, Prompt, Editable, };
+export { Form, Date, Time, Files, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Block, Panel, Modal, Popup, Portal, Message, Alert, Confirm, Prompt, Editable, };
 export type { FormData, MenuItem, };

package/dist/main.js

@@ -1,52 +1,56 @@
 import { Form as r } from "./components/form/Form.js";
 import { default as a } from "./components/date/Date.js";
 import { default as m } from "./components/time/Time.js";
-import { Files as l } from "./components/files/Files.js";
+import { Files as p } from "./components/files/Files.js";
 import { default as d } from "./components/input/Input.js";
 import { default as u } from "./components/label/Label.js";
 import { RadioList as n } from "./components/radio/RadioList.js";
-import { default as b } from "./components/button/Button.js";
-import { Select as C } from "./components/select/Select.js";
-import { default as k } from "./components/hidden/Hidden.js";
+import { default as F } from "./components/button/Button.js";
+import { Select as b } from "./components/select/Select.js";
+import { default as C } from "./components/hidden/Hidden.js";
 import { default as M } from "./components/checkbox/Checkbox.js";
-import { CheckboxList as D } from "./components/checkbox/CheckboxList.js";
-import { default as g } from "./components/fieldset/Fieldset.js";
-import { default as A } from "./components/form/FormRow.js";
+import { CheckboxList as B } from "./components/checkbox/CheckboxList.js";
+import { default as R } from "./components/fieldset/Fieldset.js";
+import { default as w } from "./components/form/FormRow.js";
 import { default as E } from "./components/form/FormCol.js";
 import { default as I } from "./components/date/DatePicker.js";
 import { Menu as T } from "./components/ui/menu/Menu.js";
-import { default as q } from "./components/ui/modal/Modal.js";
-import { Popup as y } from "./components/ui/popup/Popup.js";
-import { default as G } from "./components/ui/portal/Portal.js";
-import { default as K } from "./components/ui/message/Message.js";
-import { default as O } from "./components/ui/alert/Alert.js";
-import { default as U } from "./components/ui/confirm/Confirm.js";
-import { default as W } from "./components/ui/prompt/Prompt.js";
-import { default as Y } from "./components/ui/editable/Editable.js";
+import { default as q } from "./components/ui/block/Block.js";
+import { default as y } from "./components/ui/panel/Panel.js";
+import { default as G } from "./components/ui/modal/Modal.js";
+import { Popup as K } from "./components/ui/popup/Popup.js";
+import { default as O } from "./components/ui/portal/Portal.js";
+import { default as U } from "./components/ui/message/Message.js";
+import { default as W } from "./components/ui/alert/Alert.js";
+import { default as Y } from "./components/ui/confirm/Confirm.js";
+import { default as _ } from "./components/ui/prompt/Prompt.js";
+import { default as oo } from "./components/ui/editable/Editable.js";
 export {
-  O as Alert,
-  b as Button,
+  W as Alert,
+  q as Block,
+  F as Button,
   M as Checkbox,
-  D as CheckboxList,
-  U as Confirm,
+  B as CheckboxList,
+  Y as Confirm,
   a as Date,
   I as DatePicker,
-  Y as Editable,
-  g as Fieldset,
-  l as Files,
+  oo as Editable,
+  R as Fieldset,
+  p as Files,
   r as Form,
   E as FormCol,
-  A as FormRow,
-  k as Hidden,
+  w as FormRow,
+  C as Hidden,
   d as Input,
   u as Label,
   T as Menu,
-  K as Message,
-  q as Modal,
-  y as Popup,
-  G as Portal,
-  W as Prompt,
+  U as Message,
+  G as Modal,
+  y as Panel,
+  K as Popup,
+  O as Portal,
+  _ as Prompt,
   n as RadioList,
-  C as Select,
+  b as Select,
   m as Time
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alxgrn/telefrag-ui",
   "description": "UI library for The Daily Telefrag project",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "author": "Alexander Fedorov <alex@molner.ru>",
   "license": "Apache-2.0",