@stonecrop/aform 0.21.0 → 0.23.0

package/dist/assets/index.css

@@ -1 +1 @@
-.aform_checkbox[data-v-ca06741d]{cursor:pointer;width:auto;margin-top:0;display:block}.aform_checkbox[data-v-ca06741d]:checked{accent-color:var(--sc-primary-color);border:1px solid black}.aform_checkbox-container[data-v-ca06741d]{width:100%;display:inline-block;text-align:left}.aform_checkbox-container input[data-v-ca06741d]{width:auto}.aform_checkbox-container:hover+.aform_field-label[data-v-ca06741d]{color:var(--sc-input-active-label-color)}.aform_form-link-wrapper[data-v-154d79c9]{position:relative}.input-group[data-v-154d79c9]{display:flex;align-items:stretch}.aform_input-field[data-v-154d79c9]{flex:1;min-width:0}.aform_form-element--embedded[data-v-154d79c9]{min-width:0;flex-grow:0}.aform_input-field--embedded[data-v-154d79c9]{outline:none;background:transparent;padding:.5ch 1ch}.aform_form-element--embedded .autocomplete-results[data-v-154d79c9]{min-width:100%;width:max-content}.aform_form-btn[data-v-154d79c9]{appearance:none;border:none;outline:1px solid var(--sc-input-border-color);outline-offset:-1px;margin-left:-2px;background:var(--sc-input-field-background, white);padding:0 .75rem;cursor:pointer}.aform_form-btn[data-v-154d79c9]:focus,.input-group:focus-within .aform_form-btn[data-v-154d79c9]{outline-color:var(--sc-input-active-border-color)}.autocomplete-results[data-v-154d79c9]{position:absolute;width:100%;z-index:100;padding:0;margin:0;list-style:none;border:1px solid var(--sc-input-active-border-color);border-top:none;border-radius:0 0 .25rem .25rem;background:#fff}.autocomplete-result[data-v-154d79c9]{padding:4px 6px;cursor:pointer;border-bottom:.5px solid lightgray}.autocomplete-result.is-active[data-v-154d79c9],.autocomplete-result[data-v-154d79c9]:hover{background-color:var(--sc-row-color-zebra-light);color:var(--sc-input-active-border-color)}.acurrency__row[data-v-15bec6ef]{display:flex;gap:1ch}.acurrency__row--base[data-v-15bec6ef]{margin-top:1.5rem}.acurrency__field[data-v-15bec6ef]{position:relative;flex:1;min-width:0}.acurrency__group[data-v-15bec6ef]{display:flex;align-items:stretch;width:100%;border:1px solid var(--sc-input-border-color);border-radius:.25rem}.acurrency__group[data-v-15bec6ef]:focus-within{border-color:var(--sc-input-active-border-color)}.acurrency__amount-wrap[data-v-15bec6ef]{position:relative;flex:1;min-width:0}.acurrency__amount-wrap .aform_field-label[data-v-15bec6ef]{font-size:.85rem}.acurrency__amount[data-v-15bec6ef]{width:100%;box-sizing:border-box;border:none;outline:none;padding:.5ch 1ch;background:transparent;border-radius:0 .25rem .25rem 0;text-align:right;appearance:textfield;-moz-appearance:textfield}.acurrency__amount[data-v-15bec6ef]::-webkit-outer-spin-button,.acurrency__amount[data-v-15bec6ef]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0}.acurrency__currency[data-v-15bec6ef]{position:relative;flex:0 0 auto;min-width:4.5rem;background:var(--sc-gray-5);border-right:1px solid var(--sc-input-border-color);border-radius:.25rem 0 0 .25rem}.acurrency__base-field[data-v-15bec6ef]{width:100%;box-sizing:border-box;font-size:1rem;padding:.5ch 1ch;border:1px solid var(--sc-input-border-color);border-radius:.25rem;outline:none;appearance:textfield;-moz-appearance:textfield}.acurrency__base-field[data-v-15bec6ef]:disabled{color:var(--sc-gray-50, #888)}.acurrency__base-field[data-v-15bec6ef]::-webkit-outer-spin-button,.acurrency__base-field[data-v-15bec6ef]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0}.adatepicker[data-v-322c2ceb],.adatepicker table[data-v-322c2ceb],.adatepicker tr[data-v-322c2ceb],.adatepicker td[data-v-322c2ceb],.adatepicker th[data-v-322c2ceb]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.adatepicker[data-v-322c2ceb]{font-size:var(--sc-table-font-size);display:inline-table;color:var(--sc-cell-text-color);outline:none;border-collapse:collapse;margin-bottom:10px}.adatepicker tr[data-v-322c2ceb]{height:1.15rem;text-align:center;vertical-align:middle}.adatepicker td[data-v-322c2ceb]{border:2px solid transparent;outline:2px solid transparent;min-width:3ch;max-width:3ch;cursor:pointer}.adatepicker td.date-cell[data-v-322c2ceb]:hover{background:var(--sc-gray-10)}.adatepicker td[data-v-322c2ceb]:focus,.adatepicker td[data-v-322c2ceb]:focus-within{box-shadow:none;min-height:1.15em;max-height:1.15em;overflow:hidden}.adatepicker .selectedDate[data-v-322c2ceb],.adatepicker .startDate[data-v-322c2ceb],.adatepicker .endDate[data-v-322c2ceb]{background:var(--sc-gray-20);font-weight:bolder}.adatepicker .startDate[data-v-322c2ceb]{border-left:1px solid var(--sc-gray-50);background:var(--sc-gray-20)!important}.adatepicker .endDate[data-v-322c2ceb]{border-right:1px solid var(--sc-gray-50);background:var(--sc-gray-20)!important}.adatepicker .withinRange[data-v-322c2ceb]{background:var(--sc-gray-5)}.adatepicker .todaysDate[data-v-322c2ceb]{font-weight:bolder;color:#000}.days-header>td[data-v-322c2ceb]{font-weight:700}.prev-date[data-v-322c2ceb]{color:var(--sc-gray-20)}.adatepicker .date-input[data-v-322c2ceb]{display:flex;width:100%;gap:5px;align-items:center}.adatepicker .date-input>input[data-v-322c2ceb]{width:50%;padding:2px}p.aform_error[data-v-322c2ceb]{position:static;display:block;color:var(--sc-brand-danger, red);font-size:.7rem;margin:.25rem 0 0}.adate_time[data-v-959a3e41]{width:auto;padding:10px;box-sizing:border-box;font-size:1rem;background:var(--sc-gray-10)}.adate_time_fields[data-v-959a3e41]{display:flex;align-items:stretch;gap:5px;justify-content:flex-start}.adate_time_fields>input[data-v-959a3e41]{min-width:30px;padding:2px;text-align:center;display:inline-block;flex-basis:0}.meridiem-selector[data-v-959a3e41]{cursor:pointer;display:inline-block;flex-basis:0;padding:5px;-webkit-user-select:none;user-select:none}.meridiem-selector[data-v-959a3e41]:focus{outline:2px solid black;outline-offset:-2px}.adate_time_segment[data-v-959a3e41]{display:flex;flex-direction:column;width:40px}.colon[data-v-959a3e41]{display:flex;align-items:normal}.aform_form-btn[data-v-959a3e41]{cursor:pointer}.aform-select[data-v-959a3e41]{border:1px solid rgb(118,118,118);font-size:1rem;padding:0rem;margin:0;border-radius:0;box-sizing:border-box;min-height:auto;position:relative;color:var(--sc-cell-text-color)}.meridiem-selector[data-v-959a3e41]{margin-left:6px}.adate-selection[data-v-eeadb3e2]{display:inline-block;border:1px solid var(--sc-gray-80);padding:10px;background:var(--sc-form-background)}.adate-selection__end-label[data-v-eeadb3e2]{font-size:.8em;font-weight:700;color:var(--sc-input-active-label-color, #555);margin-top:8px;margin-bottom:2px;padding-left:2px}.empty[data-v-eeadb3e2]{color:#ccc;padding:10px;text-align:center;border:1px solid #ccc}.adate-input[data-v-a73c275b]{overflow:auto}div[data-v-a73c275b]{min-width:40ch;width:100%;box-sizing:border-box;border:1px solid transparent;padding:0rem;margin:0rem;margin-right:1ch}input[data-v-a73c275b]{width:calc(100% - 1ch);box-sizing:border-box;outline:1px solid transparent;border:1px solid var(--sc-input-border-color);padding:1ch .5ch .5ch 1ch;margin:.575rem 0 0;min-height:1.15rem;border-radius:.25rem}p[data-v-a73c275b],label[data-v-a73c275b]{color:var(--sc-input-label-color);display:block;min-height:1.15rem;padding:0rem;margin:0rem 0rem .25rem;border:1px solid transparent;box-sizing:border-box}p[data-v-a73c275b]{width:100%;color:red;font-size:85%;box-sizing:border-box}label[data-v-a73c275b]{z-index:0;font-size:80%;position:absolute;background:#fff;margin:-2.575rem 0 0 1ch;padding:0 .25ch;box-sizing:border-box}input[data-v-a73c275b]:focus{border:1px solid var(--sc-input-active-border-color)}input:focus+label[data-v-a73c275b]{color:var(--sc-input-active-label-color)}.picker[data-v-a73c275b]{position:absolute;top:50px}.autocomplete[data-v-2b75e2d5]{position:relative}.input-wrapper[data-v-2b75e2d5]{border:1px solid transparent;padding:0rem;margin:0rem;margin-right:1ch}input[data-v-2b75e2d5]{width:calc(100% - 1ch);outline:1px solid transparent;border:1px solid var(--sc-input-border-color);padding:1ch .5ch .5ch 1ch;margin:.575rem 0 0;min-height:1.15rem;border-radius:.25rem;font-family:var(--sc-font-family)}input[data-v-2b75e2d5]:focus{border:1px solid var(--sc-input-active-border-color);border-radius:.25rem .25rem 0 0;border-bottom:none}label[data-v-2b75e2d5]{display:block;min-height:1.15rem;padding:0rem;margin:0rem 0rem .25rem;border:1px solid transparent;z-index:0;font-size:80%;position:absolute;background:#fff;margin:-2.575rem 0 0 1ch;padding:0 .25ch}.autocomplete-results[data-v-2b75e2d5]{position:absolute;width:calc(100% - 1ch + 1.5px);z-index:100;padding:0;margin:0;color:var(--sc-input-active-border-color);border:1px solid var(--sc-input-active-border-color);border-radius:0 0 .25rem .25rem;border-top:none;background-color:#fff}.autocomplete-result[data-v-2b75e2d5]{list-style:none;text-align:left;padding:4px 6px;cursor:pointer;border-bottom:.5px solid lightgray}.autocomplete-result.is-active[data-v-2b75e2d5],.autocomplete-result[data-v-2b75e2d5]:hover{background-color:var(--sc-row-color-zebra-light);color:var(--sc-input-active-border-color)}p.aform_error[data-v-2b75e2d5]{position:static;display:block;color:var(--sc-brand-danger, red);font-size:.7rem;margin:.25rem 0 0}.aduration[data-v-22611dd6]{position:relative;min-width:40ch;width:100%}.aduration__summary[data-v-22611dd6]{display:flex;gap:6px;align-items:baseline;margin-top:6px;font-size:.9em}.aduration__label[data-v-22611dd6]{font-weight:700;color:var(--sc-input-active-label-color, #555)}.aduration__value[data-v-22611dd6]{color:var(--sc-cell-text-color, #000)}.aduration__ms[data-v-22611dd6]{color:var(--sc-gray-50, #888);font-size:.85em}.aduration__footer[data-v-22611dd6]{margin-top:8px}.adaterange[data-v-b5838478]{min-width:40ch;width:100%;box-sizing:border-box;border:1px solid transparent;padding:0;margin:0;margin-right:1ch;position:relative;overflow:visible}.adate-input[data-v-b5838478]{width:calc(100% - 1ch);box-sizing:border-box;outline:1px solid transparent;border:1px solid var(--sc-input-border-color);padding:1ch .5ch .5ch 1ch;margin:.575rem 0 0;min-height:1.15rem;border-radius:.25rem;cursor:pointer;background:#fff;font-size:1rem}.adate-input[data-v-b5838478]:focus{border:1px solid var(--sc-input-active-border-color)}.adate-input:focus+label[data-v-b5838478]{color:var(--sc-input-active-label-color)}p[data-v-b5838478],label[data-v-b5838478]{color:var(--sc-input-label-color);display:block;min-height:1.15rem;padding:0;margin:0;border:1px solid transparent;margin-bottom:.25rem;box-sizing:border-box}p[data-v-b5838478]{width:100%;color:red;font-size:85%}label[data-v-b5838478]{z-index:0;font-size:80%;position:absolute;background:#fff;margin:-2.575rem 0 0 1ch;padding:0 .25ch;box-sizing:border-box}.picker[data-v-b5838478]{position:absolute;top:50px;left:0;z-index:1000}.aform input{font-family:var(--sc-font-family);border:none}.aform_form-element{padding:0;margin:0;position:relative;box-sizing:border-box;flex-grow:1;min-width:20ch}.aform__grid--full{flex-basis:100%;width:100%}.aform_input-field{outline:1px solid var(--sc-input-border-color);outline-offset:-1px;font-size:1rem;padding:.5rem;margin:0;border-radius:0;box-sizing:border-box;width:100%;min-height:auto;position:relative;color:var(--sc-cell-text-color);background:var(--sc-input-field-background);font-family:var(--sc-font-family)}.aform_input-field:focus{outline:1px solid var(--sc-input-active-border-color)}.aform_display-value{display:block;padding:.5rem;min-height:2rem;color:var(--sc-cell-text-color);word-break:break-word}.aform_input-field:focus+.aform_field-label{color:var(--sc-input-active-label-color)}.aform_field-label{color:var(--sc-input-label-color);display:inline-block;position:absolute;padding:0 .25rem;margin:0rem;z-index:1;font-size:.7rem;font-weight:300;letter-spacing:.05rem;background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-background) 50%);width:auto;box-sizing:border-box;background:#fff;margin:0;grid-row:1;top:0;left:10px;border:none;line-height:0;transform:translateY(-50%)}.aform_input-field:disabled,.aform_checkbox-container:has(.aform_checkbox:disabled){background:var(--sc-input-field-disabled-background)}.aform_input-field:disabled+.aform_field-label,.aform_checkbox-container:has(.aform_checkbox:disabled)+.aform_field-label{background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-disabled-background) 50%)}.aform_input-field:disabled~p.aform_error,.aform_checkbox-container:has(.aform_checkbox:disabled)~p.aform_error{background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-disabled-background) 50%)}.aform_field-label:after{margin:0;padding:0;box-sizing:border-box;content:"";line-height:normal}p.aform_error{display:inline-block;background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-background) 50%);padding:0 .25rem;margin:0rem;width:auto;color:var(--sc-brand-danger);font-size:.7rem;position:absolute;right:0;top:0;line-height:0;background:#fff;padding:.25rem;transform:translate(-1rem,-50%);margin:0}.aform[data-v-bb17171c]{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;border:1px solid var(--sc-form-border);border-left:4px solid var(--sc-form-border);margin-bottom:1rem;max-width:100%}@media screen and (max-width:400px){.aform[data-v-bb17171c]{flex-direction:column}}.aform-nested-section[data-v-bb17171c]{width:100%;padding:.5rem 0}.aform-nested-label[data-v-bb17171c]{font-size:.9rem;font-weight:600;margin:0 0 .5rem;color:var(--sc-input-label-color, #666)}.aform-nested-section .aform[data-v-bb17171c]{border-left-width:2px;margin-left:.5rem}.collapse-button[data-v-6f1c1b45]{width:2ch;min-width:calc(66px - 4ch);background-color:transparent;font-size:150%;text-align:center;border:none;margin-top:-.5rem}.rotated[data-v-6f1c1b45]{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transition:transform .25s;transform-origin:center center}.unrotated[data-v-6f1c1b45]{transform:rotate(0);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transition:transform .25s}fieldset[data-v-162e7317]{max-width:100%;width:100%;margin-right:2ch;border:1px solid transparent;border-bottom:1px solid var(--sc-gray-50)}legend[data-v-162e7317]{width:100%;height:1.15rem;border:1px solid transparent;padding-bottom:.5rem;font-size:110%;font-weight:600;-webkit-user-select:none;user-select:none}.collapse-button[data-v-162e7317]{float:right}.aform_file-attach[data-v-8eefd179]{padding:1rem;display:flex;flex-wrap:wrap;gap:1rem;flex-direction:row;justify-content:center;align-items:center;border:1px dashed var(--sc-input-border-color);width:100%}@media screen and (max-width:400px){.aform_file-attach>.aform_form-btn[data-v-8eefd179]{width:100%}}.aform_file-attach-feedback[data-v-8eefd179]{color:var(--sc-input-label-color);width:100%;padding:.5rem;text-align:center;align-self:center}.aform_file-attach-feedback>li[data-v-8eefd179]{list-style:none;font-style:italic}.aform_file-attach-feedback>p[data-v-8eefd179]{margin-top:0}.aform_form-btn[data-v-8eefd179]{padding:.5rem 2rem;width:auto;border:1px solid var(--sc-input-border-color);color:var(--sc-input-label-color);cursor:pointer;background-color:#fff}.aform_form-btn[data-v-8eefd179]:disabled{background-color:var(--sc-gray-5)}.aquantity__row[data-v-0b714861]{display:flex;gap:1ch}.aquantity__row--stock[data-v-0b714861]{margin-top:1.5rem}.aquantity__field[data-v-0b714861]{position:relative;flex:1;min-width:0}.aquantity__group[data-v-0b714861]{display:flex;align-items:stretch;width:100%;border:1px solid var(--sc-input-border-color);border-radius:.25rem}.aquantity__group[data-v-0b714861]:focus-within{border-color:var(--sc-input-active-border-color)}.aquantity__qty[data-v-0b714861]{flex:1;min-width:0;border:none;outline:none;padding:.5ch 1ch;background:transparent;border-radius:.25rem 0 0 .25rem;appearance:textfield;-moz-appearance:textfield}.aquantity__qty[data-v-0b714861]::-webkit-outer-spin-button,.aquantity__qty[data-v-0b714861]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0}.aquantity__uom[data-v-0b714861]{position:relative;flex:0 0 auto;border-left:1px solid var(--sc-input-border-color)}.aquantity__uom-toggle[data-v-0b714861]{display:flex;align-items:center;gap:.75ch;height:100%;padding:.5ch 1ch;background:var(--sc-gray-5);border:none;border-radius:0 .25rem .25rem 0;white-space:nowrap;cursor:pointer}.aquantity__uom-toggle[data-v-0b714861]:disabled{cursor:not-allowed;color:var(--sc-gray-50, #888)}.aquantity__caret[data-v-0b714861]{display:inline-block;width:0;height:0;border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor}.aquantity__uom-menu[data-v-0b714861]{position:absolute;top:100%;right:0;z-index:100;min-width:100%;margin:.15rem 0 0;padding:.25rem 0;list-style:none;background:var(--sc-input-field-background, #fff);border:1px solid var(--sc-input-active-border-color);border-radius:.25rem}.aquantity__uom-option[data-v-0b714861]{padding:.4ch 1ch;white-space:nowrap;cursor:pointer}.aquantity__uom-option.is-active[data-v-0b714861],.aquantity__uom-option[data-v-0b714861]:hover{background-color:var(--sc-row-color-zebra-light)}.aquantity__stock-field[data-v-0b714861]{width:100%;font-size:1rem;padding:.5ch 1ch;border:1px solid var(--sc-input-border-color);border-radius:.25rem;outline:none}.aquantity__stock-field[data-v-0b714861]:disabled{color:var(--sc-gray-50, #888)}.aform_textbox[data-v-2a9c793b]{resize:vertical;line-height:1.5;min-height:4rem;font-family:inherit}.aform_textbox-display[data-v-2a9c793b]{white-space:pre-wrap}.login-container[data-v-2c0f0634]{width:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--sc-font-family)}.account-container[data-v-2c0f0634]{width:100%;margin-left:auto;margin-top:.5rem;margin-right:auto;display:flex;flex-direction:column;justify-content:center}.account-header[data-v-2c0f0634]{display:flex;flex-direction:column;text-align:center;margin-top:.5rem}#account-title[data-v-2c0f0634]{font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.025em;margin:0}#account-subtitle[data-v-2c0f0634]{font-size:.875rem;line-height:1.25rem;margin:1rem}.login-form-container[data-v-2c0f0634]{display:grid;gap:.5rem}.login-form-element[data-v-2c0f0634]{display:grid;margin:.5rem 0;position:relative}.login-field[data-v-2c0f0634]{padding:.5rem .25rem .25rem .5rem;outline:1px solid transparent;border:1px solid var(--sc-input-border-color);border-radius:.25rem}.login-field[data-v-2c0f0634]:focus{border:1px solid black}.btn[data-v-2c0f0634]{background-color:var(--sc-btn-color);color:var(--sc-btn-label-color);border:1px solid var(--sc-btn-border);margin:.5rem 0;padding:.25rem;position:relative;cursor:pointer}.btn[data-v-2c0f0634]:hover{background-color:var(--sc-btn-hover)}.btn[data-v-2c0f0634]:disabled{background-color:var(--sc-input-field-disabled-background)}.disabled[data-v-2c0f0634]{opacity:.5}.loading-icon[data-v-2c0f0634]{animation:spin-2c0f0634 1s linear infinite forwards;display:inline-block;margin-right:.2rem;line-height:0;font-size:1rem;position:relative;top:.2rem}@keyframes spin-2c0f0634{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.aform-loading[data-v-274f5ba3]{width:100%;border:1px solid var(--sc-form-border);border-left:4px solid var(--sc-form-border);padding:1rem;margin-bottom:1rem;box-sizing:border-box;position:relative;overflow:hidden;background:var(--sc-input-field-background, #fff)}.aform-loading__label[data-v-274f5ba3]{font-size:.9rem;color:var(--sc-cell-text-color);z-index:1;position:relative}.aform-loading__label[data-v-274f5ba3]:not(:empty):after{content:"...";animation:ellipsis-274f5ba3 2s infinite}.aform-loading__bar[data-v-274f5ba3]{width:100%;height:100%;position:absolute;left:-100%;top:0;background:linear-gradient(90deg,rgba(var(--sc-table-loading-color),0),rgba(var(--sc-table-loading-color),1),rgba(var(--sc-table-loading-color),0));animation:bar-sweep-274f5ba3 2s infinite;z-index:0}@keyframes bar-sweep-274f5ba3{0%{left:-100%}to{left:100%}}@keyframes ellipsis-274f5ba3{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}
+.aform_checkbox[data-v-ca06741d]{cursor:pointer;width:auto;margin-top:0;display:block}.aform_checkbox[data-v-ca06741d]:checked{accent-color:var(--sc-primary-color);border:1px solid black}.aform_checkbox-container[data-v-ca06741d]{width:100%;display:inline-block;text-align:left}.aform_checkbox-container input[data-v-ca06741d]{width:auto}.aform_checkbox-container:hover+.aform_field-label[data-v-ca06741d]{color:var(--sc-input-active-label-color)}.aform_form-link-wrapper[data-v-154d79c9]{position:relative}.input-group[data-v-154d79c9]{display:flex;align-items:stretch}.aform_input-field[data-v-154d79c9]{flex:1;min-width:0}.aform_form-element--embedded[data-v-154d79c9]{min-width:0;flex-grow:0}.aform_input-field--embedded[data-v-154d79c9]{outline:none;background:transparent;padding:.5ch 1ch}.aform_form-element--embedded .autocomplete-results[data-v-154d79c9]{min-width:100%;width:max-content}.aform_form-btn[data-v-154d79c9]{appearance:none;border:none;outline:1px solid var(--sc-input-border-color);outline-offset:-1px;margin-left:-2px;background:var(--sc-input-field-background, white);padding:0 .75rem;cursor:pointer}.aform_form-btn[data-v-154d79c9]:focus,.input-group:focus-within .aform_form-btn[data-v-154d79c9]{outline-color:var(--sc-input-active-border-color)}.autocomplete-results[data-v-154d79c9]{position:absolute;width:100%;z-index:100;padding:0;margin:0;list-style:none;border:1px solid var(--sc-input-active-border-color);border-top:none;border-radius:0 0 .25rem .25rem;background:#fff}.autocomplete-result[data-v-154d79c9]{padding:4px 6px;cursor:pointer;border-bottom:.5px solid lightgray}.autocomplete-result.is-active[data-v-154d79c9],.autocomplete-result[data-v-154d79c9]:hover{background-color:var(--sc-row-color-zebra-light);color:var(--sc-input-active-border-color)}.acurrency__row[data-v-15bec6ef]{display:flex;gap:1ch}.acurrency__row--base[data-v-15bec6ef]{margin-top:1.5rem}.acurrency__field[data-v-15bec6ef]{position:relative;flex:1;min-width:0}.acurrency__group[data-v-15bec6ef]{display:flex;align-items:stretch;width:100%;border:1px solid var(--sc-input-border-color);border-radius:.25rem}.acurrency__group[data-v-15bec6ef]:focus-within{border-color:var(--sc-input-active-border-color)}.acurrency__amount-wrap[data-v-15bec6ef]{position:relative;flex:1;min-width:0}.acurrency__amount-wrap .aform_field-label[data-v-15bec6ef]{font-size:.85rem}.acurrency__amount[data-v-15bec6ef]{width:100%;box-sizing:border-box;border:none;outline:none;padding:.5ch 1ch;background:transparent;border-radius:0 .25rem .25rem 0;text-align:right;appearance:textfield;-moz-appearance:textfield}.acurrency__amount[data-v-15bec6ef]::-webkit-outer-spin-button,.acurrency__amount[data-v-15bec6ef]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0}.acurrency__currency[data-v-15bec6ef]{position:relative;flex:0 0 auto;min-width:4.5rem;background:var(--sc-gray-5);border-right:1px solid var(--sc-input-border-color);border-radius:.25rem 0 0 .25rem}.acurrency__base-field[data-v-15bec6ef]{width:100%;box-sizing:border-box;font-size:1rem;padding:.5ch 1ch;border:1px solid var(--sc-input-border-color);border-radius:.25rem;outline:none;appearance:textfield;-moz-appearance:textfield}.acurrency__base-field[data-v-15bec6ef]:disabled{color:var(--sc-gray-50, #888)}.acurrency__base-field[data-v-15bec6ef]::-webkit-outer-spin-button,.acurrency__base-field[data-v-15bec6ef]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0}.adatepicker[data-v-322c2ceb],.adatepicker table[data-v-322c2ceb],.adatepicker tr[data-v-322c2ceb],.adatepicker td[data-v-322c2ceb],.adatepicker th[data-v-322c2ceb]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.adatepicker[data-v-322c2ceb]{font-size:var(--sc-table-font-size);display:inline-table;color:var(--sc-cell-text-color);outline:none;border-collapse:collapse;margin-bottom:10px}.adatepicker tr[data-v-322c2ceb]{height:1.15rem;text-align:center;vertical-align:middle}.adatepicker td[data-v-322c2ceb]{border:2px solid transparent;outline:2px solid transparent;min-width:3ch;max-width:3ch;cursor:pointer}.adatepicker td.date-cell[data-v-322c2ceb]:hover{background:var(--sc-gray-10)}.adatepicker td[data-v-322c2ceb]:focus,.adatepicker td[data-v-322c2ceb]:focus-within{box-shadow:none;min-height:1.15em;max-height:1.15em;overflow:hidden}.adatepicker .selectedDate[data-v-322c2ceb],.adatepicker .startDate[data-v-322c2ceb],.adatepicker .endDate[data-v-322c2ceb]{background:var(--sc-gray-20);font-weight:bolder}.adatepicker .startDate[data-v-322c2ceb]{border-left:1px solid var(--sc-gray-50);background:var(--sc-gray-20)!important}.adatepicker .endDate[data-v-322c2ceb]{border-right:1px solid var(--sc-gray-50);background:var(--sc-gray-20)!important}.adatepicker .withinRange[data-v-322c2ceb]{background:var(--sc-gray-5)}.adatepicker .todaysDate[data-v-322c2ceb]{font-weight:bolder;color:#000}.days-header>td[data-v-322c2ceb]{font-weight:700}.prev-date[data-v-322c2ceb]{color:var(--sc-gray-20)}.adatepicker .date-input[data-v-322c2ceb]{display:flex;width:100%;gap:5px;align-items:center}.adatepicker .date-input>input[data-v-322c2ceb]{width:50%;padding:2px}p.aform_error[data-v-322c2ceb]{position:static;display:block;color:var(--sc-brand-danger, red);font-size:.7rem;margin:.25rem 0 0}.adate_time[data-v-95ad0aa4]{width:auto;padding:10px;box-sizing:border-box;font-size:1rem;background:var(--sc-gray-10)}.adate_time_fields[data-v-95ad0aa4]{display:flex;align-items:stretch;gap:5px;justify-content:flex-start}.adate_time_fields>input[data-v-95ad0aa4]{min-width:30px;padding:2px;text-align:center;display:inline-block;flex-basis:0}.meridiem-selector[data-v-95ad0aa4]{cursor:pointer;display:inline-block;flex-basis:0;padding:5px;-webkit-user-select:none;user-select:none}.meridiem-selector[data-v-95ad0aa4]:focus{outline:2px solid black;outline-offset:-2px}.adate_time_segment[data-v-95ad0aa4]{display:flex;flex-direction:column;width:40px}.colon[data-v-95ad0aa4]{display:flex;align-items:normal}.aform_form-btn[data-v-95ad0aa4]{cursor:pointer}.aform-select[data-v-95ad0aa4]{border:1px solid rgb(118,118,118);font-size:1rem;padding:0rem;margin:0;border-radius:0;box-sizing:border-box;min-height:auto;position:relative;color:var(--sc-cell-text-color)}.meridiem-selector[data-v-95ad0aa4]{margin-left:6px}.adate-selection[data-v-602dfd69]{display:inline-block;border:1px solid var(--sc-gray-80);padding:10px;background:var(--sc-form-background)}.adate-selection__end-label[data-v-602dfd69]{font-size:.8em;font-weight:700;color:var(--sc-input-active-label-color, #555);margin-top:8px;margin-bottom:2px;padding-left:2px}.empty[data-v-602dfd69]{color:#ccc;padding:10px;text-align:center;border:1px solid #ccc}.adate-picker[data-v-5de3fe7a]{position:absolute;top:100%;left:0;z-index:1000;margin-top:.25rem}.autocomplete[data-v-11fc3569]{position:relative}.autocomplete-results[data-v-11fc3569]{position:absolute;left:0;right:0;z-index:100;padding:0;margin:0;color:var(--sc-input-active-border-color);border:1px solid var(--sc-input-active-border-color);border-radius:0;border-top:none;background-color:var(--sc-input-field-background, #fff);list-style:none}.autocomplete-result[data-v-11fc3569]{text-align:left;padding:4px 6px;cursor:pointer;border-bottom:.5px solid lightgray}.autocomplete-result.is-active[data-v-11fc3569],.autocomplete-result[data-v-11fc3569]:hover{background-color:var(--sc-row-color-zebra-light);color:var(--sc-input-active-border-color)}.abadge[data-v-4f364f5f]{display:block;box-sizing:border-box;font:inherit;line-height:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.abadge--cell-fill[data-v-4f364f5f]{display:block;box-sizing:border-box;width:100%;min-height:calc(var(--sc-atable-row-height, 1.5em) + 2 * var(--sc-atable-row-padding, .125rem));line-height:calc(var(--sc-atable-row-height, 1.5em) + 2 * var(--sc-atable-row-padding, .125rem));margin:0;padding:0 .5ch;border-radius:0;text-align:inherit;background:var(--sc-badge-bg);color:var(--sc-badge-text)}.abadge--cell-fill.abadge--neutral[data-v-4f364f5f]{--sc-badge-bg: var(--sc-badge-neutral-bg);--sc-badge-text: var(--sc-badge-neutral-text)}.abadge--cell-fill.abadge--success[data-v-4f364f5f]{--sc-badge-bg: var(--sc-badge-success-bg);--sc-badge-text: var(--sc-badge-success-text)}.abadge--cell-fill.abadge--warning[data-v-4f364f5f]{--sc-badge-bg: var(--sc-badge-warning-bg);--sc-badge-text: var(--sc-badge-warning-text)}.abadge--cell-fill.abadge--danger[data-v-4f364f5f]{--sc-badge-bg: var(--sc-badge-danger-bg);--sc-badge-text: var(--sc-badge-danger-text)}.abadge--cell-fill.abadge--brand[data-v-4f364f5f]{--sc-badge-bg: var(--sc-badge-brand-bg);--sc-badge-text: var(--sc-badge-brand-text)}.abadge--input-accent[data-v-4f364f5f]{background:var(--sc-input-field-background, #ffffff);color:inherit;border-left:4px solid var(--sc-badge-accent);padding-left:calc(1ch - 4px)}.abadge--input-accent.abadge--neutral[data-v-4f364f5f]{--sc-badge-accent: var(--sc-badge-neutral-accent)}.abadge--input-accent.abadge--success[data-v-4f364f5f]{--sc-badge-accent: var(--sc-badge-success-accent)}.abadge--input-accent.abadge--warning[data-v-4f364f5f]{--sc-badge-accent: var(--sc-badge-warning-accent)}.abadge--input-accent.abadge--danger[data-v-4f364f5f]{--sc-badge-accent: var(--sc-badge-danger-accent)}.abadge--input-accent.abadge--brand[data-v-4f364f5f]{--sc-badge-accent: var(--sc-badge-brand-accent)}.adatetime-picker[data-v-b0fa488b]{position:absolute;top:100%;left:0;z-index:1000;margin-top:.25rem}.aduration[data-v-2e4dd7dd]{position:relative;min-width:40ch;width:100%}.aduration__summary[data-v-2e4dd7dd]{display:flex;gap:6px;align-items:baseline;margin-top:6px;font-size:.9em}.aduration__label[data-v-2e4dd7dd]{font-weight:700;color:var(--sc-input-active-label-color, #555)}.aduration__value[data-v-2e4dd7dd]{color:var(--sc-cell-text-color, #000)}.aduration__ms[data-v-2e4dd7dd]{color:var(--sc-gray-50, #888);font-size:.85em}.aduration__footer[data-v-2e4dd7dd]{margin-top:8px}.adaterange-picker[data-v-f8dad4d3]{position:absolute;top:100%;left:0;z-index:1000;margin-top:.25rem}.aform input{font-family:var(--sc-font-family);border:none}.aform_form-element{padding:0;margin:0;position:relative;box-sizing:border-box;flex-grow:1;min-width:20ch}.aform__grid--full{flex-basis:100%;width:100%}.aform_input-field{outline:1px solid var(--sc-input-border-color);outline-offset:-1px;font-size:1rem;padding:.5rem;margin:0;border-radius:0;box-sizing:border-box;width:100%;min-height:auto;position:relative;color:var(--sc-cell-text-color);background:var(--sc-input-field-background);font-family:var(--sc-font-family)}.aform_input-field:focus{outline:1px solid var(--sc-input-active-border-color)}.aform_display-value{display:block;padding:.5rem;min-height:2rem;color:var(--sc-cell-text-color);word-break:break-word}.aform_input-field:focus+.aform_field-label{color:var(--sc-input-active-label-color)}.aform_field-label{color:var(--sc-input-label-color);display:inline-block;position:absolute;padding:0 .25rem;margin:0rem;z-index:1;font-size:.7rem;font-weight:300;letter-spacing:.05rem;background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-background) 50%);width:auto;box-sizing:border-box;background:#fff;margin:0;grid-row:1;top:0;left:10px;border:none;line-height:0;transform:translateY(-50%)}.aform_input-field:disabled,.aform_checkbox-container:has(.aform_checkbox:disabled){background:var(--sc-input-field-disabled-background)}.aform_input-field:disabled+.aform_field-label,.aform_checkbox-container:has(.aform_checkbox:disabled)+.aform_field-label{background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-disabled-background) 50%)}.aform_input-field:disabled~p.aform_error,.aform_checkbox-container:has(.aform_checkbox:disabled)~p.aform_error{background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-disabled-background) 50%)}.aform_field-label:after{margin:0;padding:0;box-sizing:border-box;content:"";line-height:normal}p.aform_error{display:inline-block;background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-background) 50%);padding:0 .25rem;margin:0rem;width:auto;color:var(--sc-brand-danger);font-size:.7rem;position:absolute;right:0;top:0;line-height:0;background:#fff;padding:.25rem;transform:translate(-1rem,-50%);margin:0}.aform[data-v-bb17171c]{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;border:1px solid var(--sc-form-border);border-left:4px solid var(--sc-form-border);margin-bottom:1rem;max-width:100%}@media screen and (max-width:400px){.aform[data-v-bb17171c]{flex-direction:column}}.aform-nested-section[data-v-bb17171c]{width:100%;padding:.5rem 0}.aform-nested-label[data-v-bb17171c]{font-size:.9rem;font-weight:600;margin:0 0 .5rem;color:var(--sc-input-label-color, #666)}.aform-nested-section .aform[data-v-bb17171c]{border-left-width:2px;margin-left:.5rem}.collapse-button[data-v-6f1c1b45]{width:2ch;min-width:calc(66px - 4ch);background-color:transparent;font-size:150%;text-align:center;border:none;margin-top:-.5rem}.rotated[data-v-6f1c1b45]{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transition:transform .25s;transform-origin:center center}.unrotated[data-v-6f1c1b45]{transform:rotate(0);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transition:transform .25s}fieldset[data-v-162e7317]{max-width:100%;width:100%;margin-right:2ch;border:1px solid transparent;border-bottom:1px solid var(--sc-gray-50)}legend[data-v-162e7317]{width:100%;height:1.15rem;border:1px solid transparent;padding-bottom:.5rem;font-size:110%;font-weight:600;-webkit-user-select:none;user-select:none}.collapse-button[data-v-162e7317]{float:right}.aform_file-attach[data-v-8eefd179]{padding:1rem;display:flex;flex-wrap:wrap;gap:1rem;flex-direction:row;justify-content:center;align-items:center;border:1px dashed var(--sc-input-border-color);width:100%}@media screen and (max-width:400px){.aform_file-attach>.aform_form-btn[data-v-8eefd179]{width:100%}}.aform_file-attach-feedback[data-v-8eefd179]{color:var(--sc-input-label-color);width:100%;padding:.5rem;text-align:center;align-self:center}.aform_file-attach-feedback>li[data-v-8eefd179]{list-style:none;font-style:italic}.aform_file-attach-feedback>p[data-v-8eefd179]{margin-top:0}.aform_form-btn[data-v-8eefd179]{padding:.5rem 2rem;width:auto;border:1px solid var(--sc-input-border-color);color:var(--sc-input-label-color);cursor:pointer;background-color:#fff}.aform_form-btn[data-v-8eefd179]:disabled{background-color:var(--sc-gray-5)}.aquantity__row[data-v-0b714861]{display:flex;gap:1ch}.aquantity__row--stock[data-v-0b714861]{margin-top:1.5rem}.aquantity__field[data-v-0b714861]{position:relative;flex:1;min-width:0}.aquantity__group[data-v-0b714861]{display:flex;align-items:stretch;width:100%;border:1px solid var(--sc-input-border-color);border-radius:.25rem}.aquantity__group[data-v-0b714861]:focus-within{border-color:var(--sc-input-active-border-color)}.aquantity__qty[data-v-0b714861]{flex:1;min-width:0;border:none;outline:none;padding:.5ch 1ch;background:transparent;border-radius:.25rem 0 0 .25rem;appearance:textfield;-moz-appearance:textfield}.aquantity__qty[data-v-0b714861]::-webkit-outer-spin-button,.aquantity__qty[data-v-0b714861]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0}.aquantity__uom[data-v-0b714861]{position:relative;flex:0 0 auto;border-left:1px solid var(--sc-input-border-color)}.aquantity__uom-toggle[data-v-0b714861]{display:flex;align-items:center;gap:.75ch;height:100%;padding:.5ch 1ch;background:var(--sc-gray-5);border:none;border-radius:0 .25rem .25rem 0;white-space:nowrap;cursor:pointer}.aquantity__uom-toggle[data-v-0b714861]:disabled{cursor:not-allowed;color:var(--sc-gray-50, #888)}.aquantity__caret[data-v-0b714861]{display:inline-block;width:0;height:0;border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor}.aquantity__uom-menu[data-v-0b714861]{position:absolute;top:100%;right:0;z-index:100;min-width:100%;margin:.15rem 0 0;padding:.25rem 0;list-style:none;background:var(--sc-input-field-background, #fff);border:1px solid var(--sc-input-active-border-color);border-radius:.25rem}.aquantity__uom-option[data-v-0b714861]{padding:.4ch 1ch;white-space:nowrap;cursor:pointer}.aquantity__uom-option.is-active[data-v-0b714861],.aquantity__uom-option[data-v-0b714861]:hover{background-color:var(--sc-row-color-zebra-light)}.aquantity__stock-field[data-v-0b714861]{width:100%;font-size:1rem;padding:.5ch 1ch;border:1px solid var(--sc-input-border-color);border-radius:.25rem;outline:none}.aquantity__stock-field[data-v-0b714861]:disabled{color:var(--sc-gray-50, #888)}.aform_textbox[data-v-2a9c793b]{resize:vertical;line-height:1.5;min-height:4rem;font-family:inherit}.aform_textbox-display[data-v-2a9c793b]{white-space:pre-wrap}.login-container[data-v-2c0f0634]{width:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--sc-font-family)}.account-container[data-v-2c0f0634]{width:100%;margin-left:auto;margin-top:.5rem;margin-right:auto;display:flex;flex-direction:column;justify-content:center}.account-header[data-v-2c0f0634]{display:flex;flex-direction:column;text-align:center;margin-top:.5rem}#account-title[data-v-2c0f0634]{font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.025em;margin:0}#account-subtitle[data-v-2c0f0634]{font-size:.875rem;line-height:1.25rem;margin:1rem}.login-form-container[data-v-2c0f0634]{display:grid;gap:.5rem}.login-form-element[data-v-2c0f0634]{display:grid;margin:.5rem 0;position:relative}.login-field[data-v-2c0f0634]{padding:.5rem .25rem .25rem .5rem;outline:1px solid transparent;border:1px solid var(--sc-input-border-color);border-radius:.25rem}.login-field[data-v-2c0f0634]:focus{border:1px solid black}.btn[data-v-2c0f0634]{background-color:var(--sc-btn-color);color:var(--sc-btn-label-color);border:1px solid var(--sc-btn-border);margin:.5rem 0;padding:.25rem;position:relative;cursor:pointer}.btn[data-v-2c0f0634]:hover{background-color:var(--sc-btn-hover)}.btn[data-v-2c0f0634]:disabled{background-color:var(--sc-input-field-disabled-background)}.disabled[data-v-2c0f0634]{opacity:.5}.loading-icon[data-v-2c0f0634]{animation:spin-2c0f0634 1s linear infinite forwards;display:inline-block;margin-right:.2rem;line-height:0;font-size:1rem;position:relative;top:.2rem}@keyframes spin-2c0f0634{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.aform-loading[data-v-274f5ba3]{width:100%;border:1px solid var(--sc-form-border);border-left:4px solid var(--sc-form-border);padding:1rem;margin-bottom:1rem;box-sizing:border-box;position:relative;overflow:hidden;background:var(--sc-input-field-background, #fff)}.aform-loading__label[data-v-274f5ba3]{font-size:.9rem;color:var(--sc-cell-text-color);z-index:1;position:relative}.aform-loading__label[data-v-274f5ba3]:not(:empty):after{content:"...";animation:ellipsis-274f5ba3 2s infinite}.aform-loading__bar[data-v-274f5ba3]{width:100%;height:100%;position:absolute;left:-100%;top:0;background:linear-gradient(90deg,rgba(var(--sc-table-loading-color),0),rgba(var(--sc-table-loading-color),1),rgba(var(--sc-table-loading-color),0));animation:bar-sweep-274f5ba3 2s infinite;z-index:0}@keyframes bar-sweep-274f5ba3{0%{left:-100%}to{left:100%}}@keyframes ellipsis-274f5ba3{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}

package/dist/src/index.d.ts

@@ -1,12 +1,16 @@
 export type * from '@stonecrop/atable/types';
 export { deserializeFunction } from './utils/deserialize';
+export { badgeInputAccentStyle, resolveFieldBadge } from './utils/badge';
+export type { BadgeFormatContext, BadgeFormatFn } from './utils/badge';
 import type { App } from 'vue';
 import ACheckbox from './components/form/ACheckbox.vue';
 import ACurrencyInput from './components/form/ACurrencyInput.vue';
 import ADate from './components/form/ADate.vue';
 import ADropdown from './components/form/ADropdown.vue';
+import ABadge from './components/form/ABadge.vue';
 import ADatePicker from './components/form/ADatePicker.vue';
 import ADateTime from './components/form/ADateTime.vue';
+import ADateTimeInput from './components/form/ADateTimeInput.vue';
 import ADateSelection from './components/form/ADateSelection.vue';
 import ADuration from './components/form/ADuration.vue';
 import ADateRange from './components/form/ADateRange.vue';
@@ -27,5 +31,5 @@ export type * from './types';
  * @public
  */
 declare function install(app: App): void;
-export { ACheckbox, ACurrencyInput, ADate, ADropdown, ADatePicker, ADateRange, ADateSelection, ADuration, ADateTime, AFieldset, AFileAttach, AForm, AFormLink, ANumericInput, AQuantityInput, ATextInput, ATextboxInput, Login, AFormLoading, install, };
+export { ACheckbox, ACurrencyInput, ADate, ADropdown, ABadge, ADatePicker, ADateRange, ADateSelection, ADuration, ADateTime, ADateTimeInput, AFieldset, AFileAttach, AForm, AFormLink, ANumericInput, AQuantityInput, ATextInput, ATextboxInput, Login, AFormLoading, install, };
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,yBAAyB,CAAA;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE9B,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,cAAc,MAAM,sCAAsC,CAAA;AACjE,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,WAAW,MAAM,mCAAmC,CAAA;AAC3D,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,cAAc,MAAM,sCAAsC,CAAA;AACjE,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,UAAU,MAAM,kCAAkC,CAAA;AACzD,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,WAAW,MAAM,mCAAmC,CAAA;AAC3D,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,aAAa,MAAM,qCAAqC,CAAA;AAC/D,OAAO,cAAc,MAAM,sCAAsC,CAAA;AACjE,OAAO,UAAU,MAAM,kCAAkC,CAAA;AACzD,OAAO,aAAa,MAAM,qCAAqC,CAAA;AAC/D,OAAO,KAAK,MAAM,kCAAkC,CAAA;AACpD,OAAO,YAAY,MAAM,+BAA+B,CAAA;AAExD,mBAAmB,SAAS,CAAA;AAE5B;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAqBxB;AAED,OAAO,EACN,SAAS,EACT,cAAc,EACd,KAAK,EACL,SAAS,EACT,WAAW,EACX,UAAU,EACV,cAAc,EACd,SAAS,EACT,SAAS,EACT,SAAS,EACT,WAAW,EACX,KAAK,EACL,SAAS,EACT,aAAa,EACb,cAAc,EACd,UAAU,EACV,aAAa,EACb,KAAK,EACL,YAAY,EACZ,OAAO,GACP,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,yBAAyB,CAAA;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACxE,YAAY,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAEtE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE9B,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,cAAc,MAAM,sCAAsC,CAAA;AACjE,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,MAAM,MAAM,8BAA8B,CAAA;AACjD,OAAO,WAAW,MAAM,mCAAmC,CAAA;AAC3D,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,cAAc,MAAM,sCAAsC,CAAA;AACjE,OAAO,cAAc,MAAM,sCAAsC,CAAA;AACjE,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,UAAU,MAAM,kCAAkC,CAAA;AACzD,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,WAAW,MAAM,mCAAmC,CAAA;AAC3D,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,aAAa,MAAM,qCAAqC,CAAA;AAC/D,OAAO,cAAc,MAAM,sCAAsC,CAAA;AACjE,OAAO,UAAU,MAAM,kCAAkC,CAAA;AACzD,OAAO,aAAa,MAAM,qCAAqC,CAAA;AAC/D,OAAO,KAAK,MAAM,kCAAkC,CAAA;AACpD,OAAO,YAAY,MAAM,+BAA+B,CAAA;AAExD,mBAAmB,SAAS,CAAA;AAE5B;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAuBxB;AAED,OAAO,EACN,SAAS,EACT,cAAc,EACd,KAAK,EACL,SAAS,EACT,MAAM,EACN,WAAW,EACX,UAAU,EACV,cAAc,EACd,SAAS,EACT,SAAS,EACT,cAAc,EACd,SAAS,EACT,WAAW,EACX,KAAK,EACL,SAAS,EACT,aAAa,EACb,cAAc,EACd,UAAU,EACV,aAAa,EACb,KAAK,EACL,YAAY,EACZ,OAAO,GACP,CAAA"}

package/dist/src/index.js

@@ -1,11 +1,14 @@
 export { deserializeFunction } from './utils/deserialize';
+export { badgeInputAccentStyle, resolveFieldBadge } from './utils/badge';
 import { install as installATable } from '@stonecrop/atable';
 import ACheckbox from './components/form/ACheckbox.vue';
 import ACurrencyInput from './components/form/ACurrencyInput.vue';
 import ADate from './components/form/ADate.vue';
 import ADropdown from './components/form/ADropdown.vue';
+import ABadge from './components/form/ABadge.vue';
 import ADatePicker from './components/form/ADatePicker.vue';
 import ADateTime from './components/form/ADateTime.vue';
+import ADateTimeInput from './components/form/ADateTimeInput.vue';
 import ADateSelection from './components/form/ADateSelection.vue';
 import ADuration from './components/form/ADuration.vue';
 import ADateRange from './components/form/ADateRange.vue';
@@ -30,8 +33,10 @@ function install(app /* options */) {
     app.component('ACurrencyInput', ACurrencyInput);
     app.component('ADate', ADate);
     app.component('ADropdown', ADropdown);
+    app.component('ABadge', ABadge);
     app.component('ADatePicker', ADatePicker);
     app.component('ADateTime', ADateTime);
+    app.component('ADateTimeInput', ADateTimeInput);
     app.component('ADateRange', ADateRange);
     app.component('ADateSelection', ADateSelection);
     app.component('AFieldset', AFieldset);
@@ -45,4 +50,4 @@ function install(app /* options */) {
     app.component('ADuration', ADuration);
     app.component('AFormLoading', AFormLoading);
 }
-export { ACheckbox, ACurrencyInput, ADate, ADropdown, ADatePicker, ADateRange, ADateSelection, ADuration, ADateTime, AFieldset, AFileAttach, AForm, AFormLink, ANumericInput, AQuantityInput, ATextInput, ATextboxInput, Login, AFormLoading, install, };
+export { ACheckbox, ACurrencyInput, ADate, ADropdown, ABadge, ADatePicker, ADateRange, ADateSelection, ADuration, ADateTime, ADateTimeInput, AFieldset, AFileAttach, AForm, AFormLink, ANumericInput, AQuantityInput, ATextInput, ATextboxInput, Login, AFormLoading, install, };

package/dist/src/utils/badge.d.ts

@@ -0,0 +1,25 @@
+import type { BadgeDescriptor, FieldOptions } from '@stonecrop/schema';
+/**
+ * Row context passed to badge `format` functions in form fields.
+ * @public
+ */
+export type BadgeFormatContext = {
+    record?: Record<string, unknown>;
+    row?: Record<string, unknown>;
+};
+/**
+ * Badge-aware field `format` function signature.
+ * @public
+ */
+export type BadgeFormatFn = (value: unknown, context: BadgeFormatContext) => string | BadgeDescriptor;
+/**
+ * Resolve a field value to a badge descriptor using format (if present) then options map.
+ * @public
+ */
+export declare function resolveFieldBadge(value: unknown, options: FieldOptions | undefined, format: string | BadgeFormatFn | undefined, context?: BadgeFormatContext): BadgeDescriptor | undefined;
+/**
+ * CSS custom properties for input-accent styling on a native input.
+ * @public
+ */
+export declare function badgeInputAccentStyle(descriptor: BadgeDescriptor | undefined): Record<string, string> | undefined;
+//# sourceMappingURL=badge.d.ts.map

package/dist/src/utils/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/utils/badge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAKtE;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAC7B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,kBAAkB,KAAK,MAAM,GAAG,eAAe,CAAA;AAErG;;;GAGG;AACH,wBAAgB,iBAAiB,CAChC,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,YAAY,GAAG,SAAS,EACjC,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,EAC1C,OAAO,GAAE,kBAAuB,GAC9B,eAAe,GAAG,SAAS,CAqB7B;AAqBD;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,eAAe,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAkBjH"}

package/dist/src/utils/badge.js

@@ -0,0 +1,71 @@
+import { isBadgeDescriptor, lookupBadge } from '@stonecrop/schema';
+import { deserializeFunction } from './deserialize';
+/**
+ * Resolve a field value to a badge descriptor using format (if present) then options map.
+ * @public
+ */
+export function resolveFieldBadge(value, options, format, context = {}) {
+    if (format) {
+        let formatted;
+        if (typeof format === 'function') {
+            formatted = format(value, context);
+        }
+        else {
+            const formatFn = deserializeFunction(format);
+            formatted = formatFn(value, context);
+        }
+        if (isBadgeDescriptor(formatted)) {
+            const label = formatted.label.trim();
+            return label ? formatted : undefined;
+        }
+        if (typeof formatted === 'string' && formatted !== '') {
+            return lookupBadge(options, formatted) ?? { label: formatted, variant: 'neutral' };
+        }
+    }
+    const key = badgeLookupKey(value);
+    if (key === undefined)
+        return undefined;
+    return lookupBadge(options, key);
+}
+/**
+ * Stored choice value as an options-map key. Only primitives can match a declared choice, so
+ * anything else yields undefined rather than the '[object Object]' that String() would produce.
+ */
+function badgeLookupKey(value) {
+    switch (typeof value) {
+        case 'string':
+            return value === '' ? undefined : value;
+        case 'number':
+        case 'boolean':
+        case 'bigint':
+            return String(value);
+        default:
+            return undefined;
+    }
+}
+const BADGE_VARIANTS = new Set(['neutral', 'success', 'warning', 'danger', 'brand']);
+/**
+ * CSS custom properties for input-accent styling on a native input.
+ * @public
+ */
+export function badgeInputAccentStyle(descriptor) {
+    if (!descriptor?.label?.trim())
+        return undefined;
+    const variant = descriptor.variant ?? 'neutral';
+    if (descriptor.color) {
+        return {
+            borderLeftWidth: '4px',
+            borderLeftStyle: 'solid',
+            borderLeftColor: descriptor.color,
+            paddingLeft: 'calc(1ch - 4px)',
+        };
+    }
+    if (!BADGE_VARIANTS.has(variant))
+        return undefined;
+    return {
+        borderLeftWidth: '4px',
+        borderLeftStyle: 'solid',
+        borderLeftColor: `var(--sc-badge-${variant}-accent)`,
+        paddingLeft: 'calc(1ch - 4px)',
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/aform",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "Schema-driven form components for Stonecrop",
   "bugs": {
     "url": "https://github.com/agritheory/stonecrop/issues"
@@ -35,10 +35,10 @@
   "dependencies": {
     "@vueuse/components": "^14.2.1",
     "@vueuse/core": "^14.2.1",
-    "@stonecrop/schema": "0.21.0",
-    "@stonecrop/utilities": "0.21.0",
-    "@stonecrop/themes": "0.21.0",
-    "@stonecrop/atable": "0.21.0"
+    "@stonecrop/atable": "0.23.0",
+    "@stonecrop/schema": "0.23.0",
+    "@stonecrop/themes": "0.23.0",
+    "@stonecrop/utilities": "0.23.0"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.30.5",

package/src/components/form/ABadge.vue

@@ -0,0 +1,135 @@
+<template>
+	<span v-if="displayLabel" :class="classes" :style="styleVars">{{ displayLabel }}</span>
+</template>
+
+<script setup lang="ts">
+import type { BadgeDescriptor, BadgePresentation, BadgeVariant, FieldOptions } from '@stonecrop/schema'
+import { lookupBadge } from '@stonecrop/schema'
+import { computed, type CSSProperties } from 'vue'
+
+const props = defineProps<
+	Partial<BadgeDescriptor> & {
+		/** Defaults to `cell-fill`: every call site fully determines this, so omitting it should
+		 * degrade to the common case rather than rendering an unstyled badge. */
+		presentation?: BadgePresentation
+		/** Stored field value — used with `options` when `label` is omitted. */
+		value?: unknown
+		options?: FieldOptions
+	}
+>()
+
+const resolved = computed((): BadgeDescriptor | undefined => {
+	if (props.label?.trim()) {
+		return {
+			label: props.label.trim(),
+			variant: props.variant,
+			color: props.color,
+		}
+	}
+	if (props.value === null || props.value === undefined || props.value === '') return undefined
+	const key = typeof props.value === 'string' ? props.value : String(props.value)
+	return lookupBadge(props.options, key)
+})
+
+const displayLabel = computed(() => resolved.value?.label?.trim() ?? '')
+
+const activeVariant = computed((): BadgeVariant => resolved.value?.variant ?? props.variant ?? 'neutral')
+
+const activeColor = computed(() => resolved.value?.color ?? props.color)
+
+const classes = computed(() => [
+	'abadge',
+	`abadge--${props.presentation ?? 'cell-fill'}`,
+	`abadge--${activeVariant.value}`,
+])
+
+const styleVars = computed((): CSSProperties => {
+	const color = activeColor.value
+	if (!color) return {}
+	return {
+		'--sc-badge-bg': color,
+		'--sc-badge-text': color,
+		'--sc-badge-accent': color,
+	} as CSSProperties
+})
+
+export type { BadgePresentation, BadgeVariant }
+</script>
+
+<style scoped>
+.abadge {
+	display: block;
+	box-sizing: border-box;
+	font: inherit;
+	line-height: inherit;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.abadge--cell-fill {
+	display: block;
+	box-sizing: border-box;
+	width: 100%;
+	min-height: calc(var(--sc-atable-row-height, 1.5em) + 2 * var(--sc-atable-row-padding, 0.125rem));
+	line-height: calc(var(--sc-atable-row-height, 1.5em) + 2 * var(--sc-atable-row-padding, 0.125rem));
+	margin: 0;
+	padding: 0 0.5ch;
+	border-radius: 0;
+	text-align: inherit;
+	background: var(--sc-badge-bg);
+	color: var(--sc-badge-text);
+}
+
+.abadge--cell-fill.abadge--neutral {
+	--sc-badge-bg: var(--sc-badge-neutral-bg);
+	--sc-badge-text: var(--sc-badge-neutral-text);
+}
+
+.abadge--cell-fill.abadge--success {
+	--sc-badge-bg: var(--sc-badge-success-bg);
+	--sc-badge-text: var(--sc-badge-success-text);
+}
+
+.abadge--cell-fill.abadge--warning {
+	--sc-badge-bg: var(--sc-badge-warning-bg);
+	--sc-badge-text: var(--sc-badge-warning-text);
+}
+
+.abadge--cell-fill.abadge--danger {
+	--sc-badge-bg: var(--sc-badge-danger-bg);
+	--sc-badge-text: var(--sc-badge-danger-text);
+}
+
+.abadge--cell-fill.abadge--brand {
+	--sc-badge-bg: var(--sc-badge-brand-bg);
+	--sc-badge-text: var(--sc-badge-brand-text);
+}
+
+.abadge--input-accent {
+	background: var(--sc-input-field-background, #ffffff);
+	color: inherit;
+	border-left: 4px solid var(--sc-badge-accent);
+	padding-left: calc(1ch - 4px);
+}
+
+.abadge--input-accent.abadge--neutral {
+	--sc-badge-accent: var(--sc-badge-neutral-accent);
+}
+
+.abadge--input-accent.abadge--success {
+	--sc-badge-accent: var(--sc-badge-success-accent);
+}
+
+.abadge--input-accent.abadge--warning {
+	--sc-badge-accent: var(--sc-badge-warning-accent);
+}
+
+.abadge--input-accent.abadge--danger {
+	--sc-badge-accent: var(--sc-badge-danger-accent);
+}
+
+.abadge--input-accent.abadge--brand {
+	--sc-badge-accent: var(--sc-badge-brand-accent);
+}
+</style>

package/src/components/form/ADate.vue

@@ -1,30 +1,25 @@
 <template>
-	<div>
+	<div class="aform_form-element">
 		<template v-if="mode === 'display'">
 			<span class="aform_display-value">{{ modelValue ? new Date(inputDate).toLocaleDateString() : '' }}</span>
-			<label>{{ label }}</label>
+			<label class="aform_field-label">{{ label }}</label>
 		</template>
 		<template v-else>
 			<input
 				:id="uuid"
 				ref="date"
 				v-model="inputDate"
-				class="adate-input"
-				:value="inputDate"
+				class="aform_input-field"
 				type="date"
 				:disabled="mode === 'read'"
 				:required="required"
-				@click.prevent="
-					() => {
-						showPicker = !showPicker
-					}
-				" />
-			<label :for="uuid">{{ label }}</label>
-			<p v-show="errorText" v-html="errorText"></p>
+				@click="openPicker" />
+			<label class="aform_field-label" :for="uuid">{{ label }}</label>
+			<p v-show="errorText" class="aform_error" v-html="errorText"></p>
 			<ADateSelection
 				v-if="showPicker"
 				ref="picker"
-				class="picker"
+				class="adate-picker"
 				:select-range="false"
 				:show-time="false"
 				@get-date="handleDate" />
@@ -67,6 +62,10 @@ const showPicker = ref(false)
 
 onClickOutside(pickerRef, () => (showPicker.value = false))
 
+const openPicker = () => {
+	if (mode !== 'read') showPicker.value = !showPicker.value
+}
+
 watch(
 	() => modelValue.value,
 	newValue => {
@@ -79,72 +78,16 @@ watch(
 const handleDate = (data: { selected: Date }) => {
 	currentDate.value = data.selected
 	modelValue.value = inputDate.value
+	showPicker.value = false
 }
 </script>
 
 <style scoped>
-.adate-input {
-	overflow: auto;
-}
-div {
-	min-width: 40ch;
-	width: 100%;
-	box-sizing: border-box;
-	border: 1px solid transparent;
-	padding: 0rem;
-	margin: 0rem;
-	margin-right: 1ch;
-}
-
-input {
-	width: calc(100% - 1ch);
-	box-sizing: border-box;
-	outline: 1px solid transparent;
-	border: 1px solid var(--sc-input-border-color);
-	padding: 1ch 0.5ch 0.5ch 1ch;
-	margin: calc(1.15rem / 2) 0 0 0;
-	min-height: 1.15rem;
-	border-radius: 0.25rem;
-}
-
-p,
-label {
-	color: var(--sc-input-label-color);
-	display: block;
-	min-height: 1.15rem;
-	padding: 0rem;
-	margin: 0rem;
-	border: 1px solid transparent;
-	margin-bottom: 0.25rem;
-	box-sizing: border-box;
-}
-
-p {
-	width: 100%;
-	color: red;
-	font-size: 85%;
-	box-sizing: border-box;
-}
-
-label {
-	z-index: 0;
-	font-size: 80%;
-	position: absolute;
-	background: white;
-	margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
-	padding: 0 0.25ch 0 0.25ch;
-	box-sizing: border-box;
-}
-
-input:focus {
-	border: 1px solid var(--sc-input-active-border-color);
-}
-
-input:focus + label {
-	color: var(--sc-input-active-label-color);
-}
-.picker {
+.adate-picker {
 	position: absolute;
-	top: 50px;
+	top: 100%;
+	left: 0;
+	z-index: 1000;
+	margin-top: 0.25rem;
 }
 </style>

package/src/components/form/ADateRange.vue

@@ -1,28 +1,28 @@
 <template>
-	<div class="adaterange">
+	<div class="aform_form-element">
 		<template v-if="mode === 'display'">
 			<span class="aform_display-value">{{ displayValue }}</span>
-			<label>{{ label }}</label>
+			<label class="aform_field-label">{{ label }}</label>
 		</template>
 
 		<template v-else>
 			<input
 				:id="uuid"
-				class="adate-input aform_input-field"
+				class="aform_input-field"
 				type="text"
 				:value="rangeDisplay"
 				placeholder="Select date range"
 				:disabled="mode === 'read'"
 				readonly
 				@click="openPicker" />
-			<label :for="uuid">{{ label }}</label>
+			<label class="aform_field-label" :for="uuid">{{ label }}</label>
 
-			<p v-show="errorText" v-html="errorText"></p>
+			<p v-show="errorText" class="aform_error" v-html="errorText"></p>
 
 			<ADateSelection
 				v-if="showPicker"
 				ref="pickerRef"
-				class="picker"
+				class="adaterange-picker"
 				:select-range="true"
 				:show-time="false"
 				@get-date="handlePickerDate" />
@@ -123,72 +123,11 @@ watch(
 </script>
 
 <style scoped>
-.adaterange {
-	min-width: 40ch;
-	width: 100%;
-	box-sizing: border-box;
-	border: 1px solid transparent;
-	padding: 0;
-	margin: 0;
-	margin-right: 1ch;
-	position: relative;
-	overflow: visible;
-}
-
-.adate-input {
-	width: calc(100% - 1ch);
-	box-sizing: border-box;
-	outline: 1px solid transparent;
-	border: 1px solid var(--sc-input-border-color);
-	padding: 1ch 0.5ch 0.5ch 1ch;
-	margin: calc(1.15rem / 2) 0 0 0;
-	min-height: 1.15rem;
-	border-radius: 0.25rem;
-	cursor: pointer;
-	background: white;
-	font-size: 1rem;
-}
-
-.adate-input:focus {
-	border: 1px solid var(--sc-input-active-border-color);
-}
-
-.adate-input:focus + label {
-	color: var(--sc-input-active-label-color);
-}
-
-p,
-label {
-	color: var(--sc-input-label-color);
-	display: block;
-	min-height: 1.15rem;
-	padding: 0;
-	margin: 0;
-	border: 1px solid transparent;
-	margin-bottom: 0.25rem;
-	box-sizing: border-box;
-}
-
-p {
-	width: 100%;
-	color: red;
-	font-size: 85%;
-}
-
-label {
-	z-index: 0;
-	font-size: 80%;
-	position: absolute;
-	background: white;
-	margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
-	padding: 0 0.25ch 0 0.25ch;
-	box-sizing: border-box;
-}
-
-.picker {
+.adaterange-picker {
 	position: absolute;
-	top: 50px;
+	top: 100%;
 	left: 0;
 	z-index: 1000;
+	margin-top: 0.25rem;
 }
 </style>