@sonata-innovations/fiber-fbre 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +508 -0
- package/dist/fiber-fbre.cjs +1 -0
- package/dist/fiber-fbre.css +1 -0
- package/dist/fiber-fbre.js +2113 -0
- package/dist/index.d.ts +237 -0
- package/package.json +56 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.fbre-field{display:flex;flex-direction:column;gap:4px;position:relative;width:100%}.fbre-field__label{color:var(--fbre-text-secondary);display:block;font-size:13px;font-weight:500;margin-bottom:2px}.fbre-field__label .required{color:var(--fbre-error);margin-left:2px}.fbre-field__prompt{color:var(--fbre-text);font-size:14px;margin-bottom:4px}.fbre-field__input-wrap{align-items:center;display:flex;position:relative;width:100%}.fbre-field__adornment{color:var(--fbre-text-secondary);flex-shrink:0;font-size:14px;margin-right:4px}.fbre-field__input{background:transparent;border:none;color:var(--fbre-text);font-family:inherit;font-size:14px;outline:none;width:100%}.fbre-field__input::placeholder{color:var(--fbre-text-placeholder)}.fbre-field__input:-webkit-autofill,.fbre-field__input:-webkit-autofill:hover,.fbre-field__input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--fbre-bg) inset;-webkit-text-fill-color:var(--fbre-text);transition:background-color 5000s ease-in-out 0s}.fbre-field__input--readonly{background:var(--fbre-surface-hover);border-radius:2px;color:var(--fbre-text-secondary);cursor:default;padding:6px 8px}.fbre-field__textarea{background:transparent;border:none;color:var(--fbre-text);font-family:inherit;font-size:14px;min-height:60px;outline:none;resize:vertical;width:100%}.fbre-field__textarea::placeholder{color:var(--fbre-text-placeholder)}.fbre-field__textarea--readonly{background:var(--fbre-surface-hover);border-radius:2px;color:var(--fbre-text-secondary);cursor:default;padding:6px 8px}.fbre-field__helper{color:var(--fbre-text-secondary);font-size:12px}.fbre-field__counter{color:var(--fbre-text-secondary);font-size:11px;margin-left:auto}.fbre-field--error .fbre-field__label,.fbre-field--error .fbre-field__helper{color:var(--fbre-error)}.fbre-field__errors{display:flex;flex-direction:column;gap:2px;margin-top:4px}.fbre-field__error-message{color:var(--fbre-error);font-size:12px}.fbre-field__error-more{color:var(--fbre-error);font-size:11px;opacity:.8}.fbre-option-group--error .fbre-option-group__label{color:var(--fbre-error)}.fbre-field__password-toggle{background:none;border:none;color:var(--fbre-text-secondary);cursor:pointer;display:flex;flex-shrink:0;padding:2px}.fbre-field__password-toggle:hover{color:var(--fbre-text)}.fbre-field__prompt strong{font-weight:600}.fbre-field__prompt em{font-style:italic}.fbre-field__prompt a{color:var(--fbre-theme-color);text-decoration:underline}.fbre-option-group{display:flex;flex-direction:column;gap:4px}.fbre-option-group__label{color:var(--fbre-text-secondary);font-size:13px;font-weight:500;margin-bottom:4px}.fbre-option-group__label .required{color:var(--fbre-error);margin-left:2px}.fbre-option-group__items{display:flex;flex-wrap:wrap;gap:4px 16px}.fbre-option-group__items--vertical{flex-direction:column}.fbre-option-item{align-items:center;cursor:pointer;display:flex;gap:8px;padding:4px 0;position:relative;-webkit-user-select:none;user-select:none}.fbre-option-item input{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.fbre-option-item__box{align-items:center;border:2px solid var(--fbre-border);display:flex;flex-shrink:0;height:20px;justify-content:center;transition:all .15s;width:20px}.fbre-option-item__box--checkbox{border-radius:3px}.fbre-option-item__box--radio{border-radius:50%}.fbre-option-item__box svg{color:var(--fbre-on-primary);opacity:0;transition:opacity .15s}.fbre-option-item input:checked+.fbre-option-item__box{background:var(--fbre-theme-color);border-color:var(--fbre-theme-color)}.fbre-option-item input:checked+.fbre-option-item__box svg{opacity:1}.fbre-option-item input:focus-visible+.fbre-option-item__box{outline:2px solid var(--fbre-theme-color);outline-offset:2px}.fbre-option-item__text{font-size:14px}.fbre-option-group__helper{color:var(--fbre-text-secondary);font-size:12px;margin-top:2px}.fbre-option-item--readonly{cursor:default;opacity:.7;pointer-events:none}.fbre-toggle{align-items:center;cursor:pointer;display:flex;gap:10px;-webkit-user-select:none;user-select:none}.fbre-toggle input{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.fbre-toggle__track{background:var(--fbre-toggle-track);border-radius:12px;flex-shrink:0;height:24px;position:relative;transition:background .2s;width:44px}.fbre-toggle__thumb{background:var(--fbre-control-surface);border-radius:50%;box-shadow:0 1px 3px #0000004d;height:20px;left:2px;position:absolute;top:2px;transition:left .2s;width:20px}.fbre-toggle input:checked+.fbre-toggle__track{background:var(--fbre-theme-color)}.fbre-toggle input:checked+.fbre-toggle__track .fbre-toggle__thumb{left:22px}.fbre-toggle input:focus-visible+.fbre-toggle__track{outline:2px solid var(--fbre-theme-color);outline-offset:2px}.fbre-toggle__label{font-size:14px}@container (max-width: 400px){.fbre-toggle__track{height:20px;width:36px}.fbre-toggle__thumb{height:16px;width:16px}.fbre-toggle input:checked+.fbre-toggle__track .fbre-toggle__thumb{left:18px}.fbre-toggle__label{font-size:12px}}.fbre-rating{display:flex;flex-direction:column;gap:4px}.fbre-rating__stars{display:flex;gap:2px}.fbre-rating__star{cursor:pointer;height:28px;position:relative;width:28px}.fbre-rating__star svg{fill:var(--fbre-star-empty);height:28px;transition:fill .1s;width:28px}.fbre-rating__star--full svg{fill:var(--fbre-star-filled)}.fbre-rating__star--half{overflow:hidden;position:relative}.fbre-rating__star--half svg{fill:var(--fbre-star-filled);clip-path:inset(0 50% 0 0)}.fbre-rating__star--half:after{content:"";height:28px;left:0;position:absolute;top:0;width:28px}.fbre-rating__value{color:var(--fbre-text-secondary);font-size:12px}.fbre-slider{display:flex;flex-direction:column;gap:4px;width:100%}.fbre-slider__track-wrap{align-items:center;display:flex;gap:12px;padding:8px 0;position:relative;width:100%}.fbre-slider__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;height:6px;outline:none;width:100%}.fbre-slider__input::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--fbre-theme-color) 0%,var(--fbre-theme-color) var(--fill, 50%),var(--fbre-slider-track) var(--fill, 50%),var(--fbre-slider-track) 100%);border-radius:3px;height:6px}.fbre-slider__input::-moz-range-track{background:var(--fbre-slider-track);border-radius:3px;height:6px}.fbre-slider__input::-moz-range-progress{background:var(--fbre-theme-color);border-radius:3px;height:6px}.fbre-slider__input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--fbre-theme-color);border:2px solid var(--fbre-control-surface);border-radius:50%;box-shadow:0 1px 3px #0000004d;height:18px;margin-top:-6px;width:18px}.fbre-slider__input::-moz-range-thumb{background:var(--fbre-theme-color);border:2px solid var(--fbre-control-surface);border-radius:50%;box-shadow:0 1px 3px #0000004d;height:14px;width:14px}.fbre-slider__value{background:var(--fbre-theme-color);border-radius:4px;color:var(--fbre-on-primary);flex-shrink:0;font-size:12px;font-weight:600;min-width:32px;padding:2px 6px;text-align:center}.fbre-slider__marks{display:flex;justify-content:space-between;padding:0 8px}.fbre-slider__mark{color:var(--fbre-text-secondary);font-size:10px}.fbre-slider--readonly .fbre-slider__input{cursor:default;opacity:.7;pointer-events:none}.fbre-file{display:flex;flex-direction:column;gap:4px}.fbre-file__row{align-items:center;display:flex;gap:12px}.fbre-file__btn{align-items:center;background:var(--fbre-theme-color);border:none;border-radius:var(--fbre-radius);color:var(--fbre-on-primary);cursor:pointer;display:flex;font-family:inherit;font-size:13px;font-weight:500;gap:6px;padding:8px 16px;transition:background .2s;white-space:nowrap}.fbre-file__btn:hover{background:var(--fbre-theme-dark)}.fbre-file__btn input{display:none}.fbre-file__name{color:var(--fbre-text-secondary);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fbre-file__btn--uploading{cursor:default;opacity:.8}.fbre-file__btn--uploading:hover{background:var(--fbre-theme-color)}.fbre-spinner--sm{border-width:2px;height:16px;width:16px}.fbre-header{font-size:22px;font-weight:600;line-height:1.3}.fbre-text{font-size:14px;line-height:1.6}.fbre-text strong{font-weight:600}.fbre-text em{font-style:italic}.fbre-text a{color:var(--fbre-theme-color);text-decoration:underline}.fbre-divider{align-items:center;display:flex;gap:12px;width:100%}.fbre-divider__line{background:var(--fbre-surface-alt);flex:1;height:1px}.fbre-divider__label{color:var(--fbre-text-secondary);flex-shrink:0;font-size:13px;font-weight:500}.fbre-divider--left .fbre-divider__line:first-child{flex:0;max-width:0}.fbre-divider--right .fbre-divider__line:last-child{flex:0;max-width:0}.fbre-callout{align-items:center;border:1px solid var(--fbre-border);border-radius:8px;display:flex;flex-wrap:wrap;font-size:13px;gap:12px;line-height:1.6;overflow:hidden;padding:14px 16px}.fbre-callout__icon{align-items:center;background:color-mix(in srgb,currentColor 10%,transparent);border-radius:8px;display:inline-flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.fbre-callout__content{flex:1 1 120px;min-width:0}.fbre-callout__title{font-size:15px;font-weight:700;line-height:1.4;margin-bottom:2px}.fbre-callout__body strong{font-weight:600}.fbre-callout__body a{color:inherit;text-decoration:underline}.fbre-callout--info{background:color-mix(in srgb,var(--fbre-theme-color) 6%,transparent);border-color:color-mix(in srgb,var(--fbre-theme-color) 20%,transparent);color:var(--fbre-text-secondary)}.fbre-callout--success{background:#ddffda;border-color:#b8e6b4;color:#2d6a28}.fbre-callout--warning{background:#fff8e1;border-color:#ffe082;color:#7a5900}.fbre-callout--neutral{background:var(--fbre-surface);border-color:var(--fbre-border-light);color:var(--fbre-text-secondary)}.fbre-container[data-mode=dark] .fbre-callout--success{background:#1a3318;border-color:#2d5a28;color:#a8e6a0}.fbre-container[data-mode=dark] .fbre-callout--warning{background:#332b00;border-color:#650;color:#ffe082}.fbre-table{overflow-x:auto;width:100%}.fbre-table table{border-collapse:collapse;font-size:13px;width:100%}.fbre-table th,.fbre-table td{border:1px solid var(--fbre-border-light);padding:8px 12px;text-align:center}.fbre-table th{background:var(--fbre-surface);font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}.fbre-table .fbre-table__row-label{font-weight:600;text-align:left}.fbre-table tbody .fbre-table__row-label{font-weight:400}.fbre-table__label{font-size:14px;font-weight:600;margin-bottom:8px;text-align:left}.fbre-table .fbre-table__col--highlight{background:color-mix(in srgb,var(--fbre-theme-color) 15%,var(--fbre-surface));color:var(--fbre-theme-color)}.fbre-table .fbre-table__cell--highlight{background:color-mix(in srgb,var(--fbre-theme-color) 8%,transparent);font-weight:500}.fbre-group{border-radius:var(--fbre-radius);display:flex;flex-direction:column;width:100%}.fbre-group__header{align-items:center;display:flex;gap:8px}.fbre-group__legend{color:var(--fbre-text-secondary);font-size:14px;font-weight:600}.fbre-group__collapse-btn{background:none;border:none;color:var(--fbre-text-secondary);cursor:pointer;display:flex;margin-left:auto;padding:4px;transition:transform .25s ease}.fbre-group__collapse-btn.collapsed{transform:rotate(180deg)}.fbre-group__body{overflow:hidden;transition:max-height .3s ease}.fbre-group__body:has(.fbre-popup--open){overflow:visible}.fbre-group__body.collapsed{max-height:0!important;overflow:hidden}.fbre-group__content{display:flex;flex-wrap:wrap;gap:var(--fbre-layout-gap);padding:0}.fbre-repeater__remove-btn{background:none;border:none;color:var(--fbre-text-secondary);cursor:pointer;display:flex;opacity:.5;padding:2px;transition:color .15s ease,opacity .15s ease}.fbre-repeater__remove-btn:hover{color:var(--fbre-error-color, #d32f2f);opacity:1}.fbre-group__add-btn{align-self:flex-end;background:none;border:none;color:var(--fbre-theme-color);cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;margin-top:8px;padding:4px 8px}.fbre-group__add-btn:hover{text-decoration:underline}.fbre-tooltip-trigger{align-items:center;background:none;border:none;color:var(--fbre-text-secondary);cursor:pointer;display:flex;flex-shrink:0;height:28px;justify-content:center;margin-left:8px;width:28px}.fbre-tooltip-trigger:hover{color:var(--fbre-theme-color)}.fbre-tooltip-popover{background:var(--fbre-surface);border:1px solid var(--fbre-border-light);border-radius:8px;box-shadow:0 4px 16px var(--fbre-shadow-color);display:none;font-size:13px;max-width:280px;min-width:200px;padding:12px 16px;position:fixed;transform:translate(-100%);z-index:9999}.fbre-tooltip-popover.open{display:block}.fbre-dropdown{position:relative;width:100%}.fbre-dropdown__trigger{align-items:center;cursor:pointer;display:flex;gap:4px;min-height:32px;position:relative;width:100%}.fbre-dropdown__selected-text{color:var(--fbre-text);font-size:14px}.fbre-dropdown__tags{display:flex;flex-wrap:wrap;gap:4px}.fbre-dropdown__tag{align-items:center;background:var(--fbre-theme-light);border-radius:12px;color:var(--fbre-theme-color);display:flex;font-size:12px;gap:4px;padding:2px 8px}.fbre-dropdown__tag-remove{background:none;border:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0}.fbre-dropdown__placeholder{color:var(--fbre-text-placeholder);font-size:14px}.fbre-dropdown__arrow{margin-left:auto;transition:transform .2s}.fbre-dropdown__arrow.open{transform:rotate(180deg)}.fbre-dropdown__panel{max-height:200px;overflow-y:auto;right:0}.fbre-dropdown__option{align-items:center;cursor:pointer;display:flex;gap:8px;padding:8px 12px;transition:background .1s ease}.fbre-dropdown__option:hover{background:color-mix(in srgb,var(--fbre-theme-color) 8%,transparent)}.fbre-dropdown__option--selected,.fbre-dropdown__option--selected:hover{background:var(--fbre-theme-light)}.fbre-dropdown__option-check{color:var(--fbre-theme-color);flex-shrink:0;margin-left:auto}.fbre-dropdown--readonly .fbre-dropdown__trigger,.fbre-dropdown__trigger--readonly{background:var(--fbre-surface-hover);cursor:default;pointer-events:none}.fbre-datetime__trigger{align-items:center;cursor:pointer;display:flex;gap:8px;min-height:32px;position:relative;width:100%}.fbre-datetime__trigger-text{color:var(--fbre-text);font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fbre-datetime__trigger-placeholder{color:var(--fbre-text-placeholder);font-size:14px}.fbre-datetime__trigger-icon{color:var(--fbre-text-secondary);flex-shrink:0;margin-left:auto}.fbre-date-range__wrap{align-items:center;display:flex;gap:8px;width:100%}.fbre-date-range__separator{color:var(--fbre-text-secondary);flex-shrink:0;font-size:14px}.fbre-date-range__field{flex:1;min-width:0;position:relative}.fbre-date-range__field .fbre-datetime__trigger{min-height:28px}.fbre-calendar{padding:8px;width:252px}.fbre-calendar__nav{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.fbre-calendar__nav-btn{align-items:center;background:none;border:1px solid var(--fbre-border);border-radius:var(--fbre-radius);color:var(--fbre-text);cursor:pointer;display:flex;font-size:16px;height:28px;justify-content:center;transition:background .1s;width:28px}.fbre-calendar__nav-btn:hover{background:var(--fbre-surface-hover)}.fbre-calendar__nav-title{font-size:13px;font-weight:600}.fbre-calendar__weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}.fbre-calendar__weekday{color:var(--fbre-text-secondary);font-size:11px;font-weight:600;text-align:center}.fbre-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr)}.fbre-calendar__day{align-items:center;border-radius:var(--fbre-radius);cursor:pointer;display:flex;font-size:13px;height:32px;justify-content:center;transition:background .1s;width:100%}.fbre-calendar__day:hover{background:var(--fbre-surface-hover)}.fbre-calendar__day--outside{color:var(--fbre-text-disabled);pointer-events:none}.fbre-calendar__day--today{border:1px solid var(--fbre-theme-color)}.fbre-calendar__day--selected{background:var(--fbre-theme-color);color:var(--fbre-on-primary)}.fbre-calendar__day--selected:hover{background:var(--fbre-theme-dark)}.fbre-calendar__day--disabled{color:var(--fbre-text-disabled);cursor:default;pointer-events:none}.fbre-calendar__day--range{background:var(--fbre-theme-light);border-radius:0}.fbre-calendar__day--range-start{background:var(--fbre-theme-color);border-radius:var(--fbre-radius) 0 0 var(--fbre-radius);color:var(--fbre-on-primary)}.fbre-calendar__day--range-end{background:var(--fbre-theme-color);border-radius:0 var(--fbre-radius) var(--fbre-radius) 0;color:var(--fbre-on-primary)}.fbre-time-selector{display:flex;gap:4px;padding:8px;width:252px}.fbre-time-selector__column{flex:1;max-height:192px;min-width:52px;overflow-y:auto}.fbre-time-selector__column--ampm{flex:0 0 auto;min-width:52px}.fbre-time-selector__cell{align-items:center;border-radius:var(--fbre-radius);cursor:pointer;display:flex;font-size:13px;height:32px;justify-content:center;transition:background .1s}.fbre-time-selector__cell:hover{background:var(--fbre-surface-hover)}.fbre-time-selector__cell--selected{background:var(--fbre-theme-color);color:var(--fbre-on-primary)}.fbre-time-selector__cell--selected:hover{background:var(--fbre-theme-dark)}.fbre-time-selector__cell--disabled{color:var(--fbre-text-disabled);cursor:default;pointer-events:none}.fbre-picker-phase-header{align-items:center;border-bottom:1px solid var(--fbre-border-light);display:flex;gap:8px;padding:8px 12px}.fbre-picker-phase-header__back{align-items:center;background:none;border:1px solid var(--fbre-border);border-radius:var(--fbre-radius);color:var(--fbre-text);cursor:pointer;display:flex;font-size:16px;height:28px;justify-content:center;transition:background .1s;width:28px}.fbre-picker-phase-header__back:hover{background:var(--fbre-surface-hover)}.fbre-picker-phase-header__label{color:var(--fbre-text-secondary);flex:1;font-size:12px;font-weight:600;letter-spacing:.5px;text-align:center;text-transform:uppercase}.fbre-picker-phase-header__confirm{align-items:center;background:var(--fbre-theme-color);border:none;border-radius:var(--fbre-radius);color:var(--fbre-on-primary);cursor:pointer;display:flex;height:28px;justify-content:center;margin-left:auto;transition:background .1s;width:28px}.fbre-picker-phase-header__confirm:hover{background:var(--fbre-theme-dark)}.fbre-datetime__trigger--readonly{background:var(--fbre-surface-hover);cursor:default;pointer-events:none}[data-style=clean] .fbre-datetime__trigger{border-bottom:1px solid var(--fbre-border);padding:6px 0}[data-style=clean] .fbre-yesno__btn{border-radius:2px}.fbre-yesno{display:flex;gap:8px;width:100%}.fbre-yesno__btn{background:var(--fbre-surface);border:1px solid var(--fbre-border);border-radius:var(--fbre-radius);color:var(--fbre-text);cursor:pointer;flex:1;font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.5px;min-height:40px;padding:8px 16px;text-transform:uppercase;transition:background .15s,border-color .15s,color .15s}.fbre-yesno__btn:hover{border-color:var(--fbre-theme-color)}.fbre-yesno__btn--active{background:var(--fbre-theme-color);border-color:var(--fbre-theme-color);color:var(--fbre-on-primary)}.fbre-yesno__btn--active:hover{background:var(--fbre-theme-dark);border-color:var(--fbre-theme-dark)}@container (max-width: 400px){.fbre-yesno{flex-direction:column}}.fbre-colorpicker{position:relative;width:100%}.fbre-colorpicker__trigger{align-items:center;cursor:pointer;display:flex;gap:8px;min-height:32px;width:100%}.fbre-colorpicker__swatch{border:1px solid var(--fbre-border);border-radius:var(--fbre-radius);display:block;flex-shrink:0;height:24px;width:24px}.fbre-colorpicker__hex{color:var(--fbre-text);font-family:monospace;font-size:14px}.fbre-colorpicker__panel{padding:12px;width:240px}.fbre-colorpicker__saturation{border-radius:4px;cursor:crosshair;height:150px;overflow:hidden;position:relative;width:100%}.fbre-colorpicker__saturation-white{background:linear-gradient(to right,#fff,transparent);height:100%;left:0;position:absolute;top:0;width:100%}.fbre-colorpicker__saturation-black{background:linear-gradient(to top,#000,transparent);height:100%;left:0;position:absolute;top:0;width:100%}.fbre-colorpicker__cursor{border:2px solid #fff;border-radius:50%;box-shadow:0 0 2px #00000080;height:12px;pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:12px}.fbre-colorpicker__hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:4px;cursor:pointer;height:12px;margin-top:8px;position:relative;width:100%}.fbre-colorpicker__hue-cursor{background:#fff;border:2px solid #ccc;border-radius:50%;box-shadow:0 0 2px #0000004d;height:14px;pointer-events:none;position:absolute;top:-1px;transform:translate(-50%);width:14px}.fbre-colorpicker__input-row{margin-top:8px}.fbre-colorpicker__input{background:var(--fbre-bg);border:1px solid var(--fbre-border);border-radius:var(--fbre-radius);color:var(--fbre-text);font-family:monospace;font-size:13px;outline:none;padding:4px 8px;width:100%}.fbre-colorpicker__input:focus{border-color:var(--fbre-theme-color)}.fbre-colorpicker__swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.fbre-colorpicker__swatch-btn{border:2px solid transparent;border-radius:50%;cursor:pointer;height:22px;padding:0;transition:border-color .15s;width:22px}.fbre-colorpicker__swatch-btn:hover{border-color:var(--fbre-border)}.fbre-colorpicker__swatch-btn--active{border-color:var(--fbre-theme-color)}.fbre-card-select{display:flex;flex-direction:column;gap:4px;width:100%}.fbre-card-select__label{color:var(--fbre-text-secondary);font-size:13px;font-weight:500;margin-bottom:2px}[data-style=clean] .fbre-card-select__label{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase}.fbre-card-select__grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}.fbre-card-select__card{background:transparent;border:2px solid var(--fbre-border);border-radius:var(--fbre-radius);cursor:pointer;font-family:inherit;padding:20px 16px;position:relative;text-align:center;transition:border-color .15s,background-color .15s}.fbre-card-select__card:hover{border-color:color-mix(in srgb,var(--fbre-theme-color) 50%,transparent)}.fbre-card-select__card--selected{background:color-mix(in srgb,var(--fbre-theme-color) 8%,transparent);border-color:var(--fbre-theme-color)}.fbre-card-select__badge{background:var(--fbre-theme-color);border-radius:10px;color:var(--fbre-on-primary);font-size:10px;font-weight:600;left:50%;letter-spacing:.5px;padding:2px 10px;position:absolute;text-transform:uppercase;top:-10px;transform:translate(-50%)}.fbre-card-select__title{color:var(--fbre-text);font-size:24px;font-weight:700}.fbre-card-select__desc{color:var(--fbre-text-secondary);font-size:13px;margin-top:4px}.fbre-card-select__features{list-style:none;margin-top:16px;padding:0;text-align:left}.fbre-card-select__features li{align-items:flex-start;color:var(--fbre-text-secondary);display:flex;font-size:12px;gap:6px;padding:2px 0}.fbre-card-select__features li:before{color:var(--fbre-theme-color, #16a34a);content:"✓";flex-shrink:0;font-weight:700}.fbre-card-select--error .fbre-card-select__label{color:var(--fbre-error)}@container (max-width: 300px){.fbre-card-select__grid{grid-template-columns:1fr!important}.fbre-card-select__card{padding:16px 12px}.fbre-card-select__title{font-size:20px}}.fbre-computed{display:flex;flex-direction:column;gap:2px;width:100%}.fbre-computed__label{color:var(--fbre-text-secondary);font-size:13px;font-weight:500}.fbre-computed__detail{color:var(--fbre-text-secondary);font-size:11px;line-height:1.3;opacity:.8}.fbre-computed__value{border-bottom:1px solid var(--fbre-border-light);color:var(--fbre-text);font-size:14px;font-variant-numeric:tabular-nums;font-weight:600;padding:6px 0}.fbre-signature{display:flex;flex-direction:column;gap:8px;width:100%}.fbre-signature__toggle{display:flex;gap:4px}.fbre-signature__toggle-btn{background:none;border:1px solid var(--fbre-border);border-radius:var(--fbre-radius);color:var(--fbre-text-secondary);cursor:pointer;font-size:12px;padding:4px 12px;transition:all .15s}.fbre-signature__toggle-btn:hover{background:var(--fbre-surface-hover)}.fbre-signature__toggle-btn--active{background:var(--fbre-theme-light);border-color:var(--fbre-theme-color);color:var(--fbre-theme-color)}.fbre-signature__draw-area{position:relative}.fbre-signature__canvas{border:1px solid var(--fbre-border);border-radius:var(--fbre-radius);cursor:crosshair;display:block;touch-action:none;width:100%}.fbre-signature__clear-btn{background:none;border:1px solid var(--fbre-border);border-radius:var(--fbre-radius);color:var(--fbre-text-secondary);cursor:pointer;font-size:12px;padding:2px 10px;position:absolute;right:8px;top:8px;transition:all .15s}.fbre-signature__clear-btn:hover{background:var(--fbre-surface-hover);color:var(--fbre-text)}.fbre-signature__type-area{display:flex;flex-direction:column;gap:8px}.fbre-signature__typed-input{background:transparent;border:none;border-bottom:1px solid var(--fbre-border);color:var(--fbre-text);font-size:14px;outline:none;padding:8px 0;width:100%}.fbre-signature__typed-input:focus{border-bottom-color:var(--fbre-theme-color)}.fbre-signature__typed-preview{border:1px solid var(--fbre-border);border-radius:var(--fbre-radius);color:var(--fbre-text);font-family:Brush Script MT,Segoe Script,Dancing Script,cursive;font-size:28px;min-height:60px;padding:12px 16px}[data-style=clean] .fbre-signature__canvas{border-radius:2px}.fbre-btn{align-items:center;border:1px solid transparent;border-radius:var(--fbre-radius);cursor:pointer;display:inline-flex;font-family:inherit;font-size:14px;font-weight:500;gap:6px;justify-content:center;padding:10px 20px;transition:all .2s}.fbre-btn--primary{background:var(--fbre-theme-color);color:var(--fbre-on-primary)}.fbre-btn--primary:hover{background:var(--fbre-theme-dark)}.fbre-btn--secondary{background:transparent;border:1px solid var(--fbre-border);color:var(--fbre-text)}.fbre-btn--secondary:hover{background:var(--fbre-surface-hover)}.fbre-btn--text{background:transparent;color:var(--fbre-theme-color)}.fbre-btn--text:hover{background:var(--fbre-theme-light)}.fbre-btn:disabled{cursor:not-allowed;opacity:.5}.fbre-controls{align-items:center;display:grid;grid-template-columns:1fr auto 1fr;padding:12px 8px}.fbre-controls>:first-child{justify-self:start}.fbre-controls>:last-child{justify-self:end}.fbre-controls--stacked{display:flex;flex-direction:column-reverse;gap:8px}.fbre-controls--stacked .fbre-btn{width:100%}.fbre-btn__spinner{animation:fbre-spin .8s linear infinite;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:currentColor;display:inline-block;height:16px;width:16px}.fbre-completion-error{background:var(--fbre-error-light);border:1px solid var(--fbre-error);border-radius:var(--fbre-radius);color:var(--fbre-error);font-size:13px;margin:0 8px;padding:8px 12px}@container (max-width: 400px){.fbre-btn{font-size:12px;gap:4px;padding:6px 12px}.fbre-btn svg{height:14px;width:14px}.fbre-controls{padding:8px 4px}}.fbre-stepper{align-items:center;display:flex;gap:4px;justify-content:center;padding:12px 0}.fbre-stepper--dots .fbre-stepper__dot{background:var(--fbre-star-empty);border-radius:50%;height:10px;transition:all .2s;width:10px}.fbre-stepper--dots .fbre-stepper__dot.active{background:var(--fbre-theme-color);transform:scale(1.2)}.fbre-stepper--dots .fbre-stepper__dot.completed{background:var(--fbre-theme-color)}.fbre-stepper--bar{background:var(--fbre-surface-alt);border-radius:3px;height:6px;overflow:hidden;width:100%}.fbre-stepper--bar .fbre-stepper__fill{background:var(--fbre-theme-color);border-radius:3px;height:100%;transition:width .3s ease}.fbre-stepper-text{color:var(--fbre-text-secondary);font-size:12px;font-weight:500;padding:12px 16px 0;text-align:center}@container (max-width: 400px){.fbre-stepper{gap:3px;padding:8px 0}.fbre-stepper--dots .fbre-stepper__dot{height:7px;width:7px}.fbre-stepper--bar{height:4px}.fbre-stepper-text{font-size:11px;padding:8px 12px 0}}.fbre-summary{display:flex;flex-direction:column;overflow:hidden}.fbre-summary__title{font-size:22px;font-weight:600;line-height:1.3;margin-bottom:8px;padding:0 16px}.fbre-summary__body{flex-grow:1;overflow:auto;padding:0 16px}.fbre-summary__screen-header{align-items:center;cursor:pointer;display:flex;padding:12px 0 4px;-webkit-user-select:none;user-select:none}.fbre-summary__screen-label{font-size:16px;font-weight:600}.fbre-summary__screen-toggle{margin-left:auto;transition:transform .25s}.fbre-summary__screen-toggle.collapsed{transform:rotate(180deg)}.fbre-summary__screen-body{overflow:hidden;transition:max-height .3s ease}.fbre-summary__screen-body.collapsed{max-height:0!important}.fbre-summary__item{border-bottom:1px solid var(--fbre-border-subtle);padding:8px 0}.fbre-summary__item-label{font-size:13px;font-weight:500}.fbre-summary__item-value{color:var(--fbre-text-secondary);font-size:13px}.fbre-summary__item-value--empty{color:var(--fbre-text-disabled);font-style:italic}.fbre-summary__item--group{border-bottom:none;padding:0}.fbre-toast{align-items:center;background:var(--fbre-error);border-radius:8px;bottom:24px;box-shadow:0 4px 16px var(--fbre-shadow-color);color:var(--fbre-on-primary);display:flex;font-size:14px;gap:8px;left:50%;opacity:0;padding:12px 20px;pointer-events:none;position:fixed;transform:translate(-50%) translateY(20px);transition:all .3s;z-index:1000}.fbre-toast.visible{opacity:1;pointer-events:auto;transform:translate(-50%) translateY(0)}.fbre-toast__close{background:none;border:none;color:var(--fbre-on-primary);cursor:pointer;font-size:16px;margin-left:8px;padding:0}.fbre-container{--fbre-transition-duration: .25s;--fbre-transition-easing: cubic-bezier(.4, 0, .2, 1)}.fbre-screen-wrapper--transitioning{overflow:hidden;position:relative}.fbre-screen--exiting{top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute;z-index:1}.fbre-screen--entering{z-index:2}@keyframes fbre-slide-enter-forward{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes fbre-slide-exit-forward{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes fbre-slide-enter-back{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes fbre-slide-exit-back{0%{transform:translate(0)}to{transform:translate(100%)}}[data-transition=slide] .fbre-screen--entering[data-direction=forward]{animation:fbre-slide-enter-forward var(--fbre-transition-duration) var(--fbre-transition-easing) both}[data-transition=slide] .fbre-screen--exiting[data-direction=forward]{animation:fbre-slide-exit-forward var(--fbre-transition-duration) var(--fbre-transition-easing) both}[data-transition=slide] .fbre-screen--entering[data-direction=back]{animation:fbre-slide-enter-back var(--fbre-transition-duration) var(--fbre-transition-easing) both}[data-transition=slide] .fbre-screen--exiting[data-direction=back]{animation:fbre-slide-exit-back var(--fbre-transition-duration) var(--fbre-transition-easing) both}@keyframes fbre-fade-enter{0%{opacity:0}to{opacity:1}}@keyframes fbre-fade-exit{0%{opacity:1}to{opacity:0}}[data-transition=fade] .fbre-screen--entering{animation:fbre-fade-enter var(--fbre-transition-duration) var(--fbre-transition-easing) both}[data-transition=fade] .fbre-screen--exiting{animation:fbre-fade-exit var(--fbre-transition-duration) var(--fbre-transition-easing) both}@keyframes fbre-slideFade-enter-forward{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes fbre-slideFade-exit-forward{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-30px)}}@keyframes fbre-slideFade-enter-back{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes fbre-slideFade-exit-back{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(30px)}}[data-transition=slideFade] .fbre-screen--entering[data-direction=forward]{animation:fbre-slideFade-enter-forward var(--fbre-transition-duration) var(--fbre-transition-easing) both}[data-transition=slideFade] .fbre-screen--exiting[data-direction=forward]{animation:fbre-slideFade-exit-forward var(--fbre-transition-duration) var(--fbre-transition-easing) both}[data-transition=slideFade] .fbre-screen--entering[data-direction=back]{animation:fbre-slideFade-enter-back var(--fbre-transition-duration) var(--fbre-transition-easing) both}[data-transition=slideFade] .fbre-screen--exiting[data-direction=back]{animation:fbre-slideFade-exit-back var(--fbre-transition-duration) var(--fbre-transition-easing) both}@keyframes fbre-rise-enter-forward{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fbre-rise-exit-forward{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}@keyframes fbre-rise-enter-back{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fbre-rise-exit-back{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(30px)}}[data-transition=rise] .fbre-screen--entering[data-direction=forward]{animation:fbre-rise-enter-forward var(--fbre-transition-duration) var(--fbre-transition-easing) both}[data-transition=rise] .fbre-screen--exiting[data-direction=forward]{animation:fbre-rise-exit-forward var(--fbre-transition-duration) var(--fbre-transition-easing) both}[data-transition=rise] .fbre-screen--entering[data-direction=back]{animation:fbre-rise-enter-back var(--fbre-transition-duration) var(--fbre-transition-easing) both}[data-transition=rise] .fbre-screen--exiting[data-direction=back]{animation:fbre-rise-exit-back var(--fbre-transition-duration) var(--fbre-transition-easing) both}@keyframes fbre-scaleFade-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fbre-scaleFade-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}[data-transition=scaleFade] .fbre-screen--entering{animation:fbre-scaleFade-enter var(--fbre-transition-duration) var(--fbre-transition-easing) both}[data-transition=scaleFade] .fbre-screen--exiting{animation:fbre-scaleFade-exit var(--fbre-transition-duration) var(--fbre-transition-easing) both}@media(prefers-reduced-motion:reduce){.fbre-container{--fbre-transition-duration: 0ms}}.fbre-container{--fbre-theme-color: #1976d2;--fbre-theme-light: #e3f2fd;--fbre-theme-dark: #1565c0;--fbre-error: #d32f2f;--fbre-error-light: #fdecea;--fbre-text: #212121;--fbre-text-secondary: #666;--fbre-border: #ccc;--fbre-bg: #fff;--fbre-radius: 4px;--fbre-layout-gap: 4px;--fbre-font: "Segoe UI", system-ui, -apple-system, sans-serif;--fbre-surface: #fff;--fbre-surface-hover: #f5f5f5;--fbre-surface-alt: #e0e0e0;--fbre-surface-subtle: #e8e8e8;--fbre-border-light: #ddd;--fbre-border-subtle: #eee;--fbre-text-placeholder: #aaa;--fbre-text-disabled: #bbb;--fbre-toggle-track: #ccc;--fbre-control-surface: #fff;--fbre-on-primary: #fff;--fbre-star-empty: #ddd;--fbre-star-filled: #ffc107;--fbre-slider-track: #ddd;--fbre-shadow-color: rgba(0, 0, 0, .12)}.fbre-container{background-color:var(--fbre-bg);box-sizing:border-box;color:var(--fbre-text);container-type:inline-size;display:flex;flex-direction:column;font-family:var(--fbre-font);flex-grow:1;font-size:14px;height:100%;line-height:1.5;min-height:100%}.fbre-container *,.fbre-container *:before,.fbre-container *:after{box-sizing:border-box}.fbre-screen-wrapper{display:flex;flex-direction:column;flex-grow:1;min-height:0;overflow-y:auto}.fbre-screen{align-content:flex-start;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--fbre-layout-gap);padding:8px 0}.fbre-component{padding:8px;width:100%}.fbre-width-half{width:calc(50% - var(--fbre-layout-gap) / 2)}.fbre-width-third{width:calc(33.33% - var(--fbre-layout-gap) * 2 / 3)}.fbre-width-two-thirds{width:calc(66.67% - var(--fbre-layout-gap) / 3)}.fbre-width-quarter{width:calc(25% - var(--fbre-layout-gap) * 3 / 4)}.fbre-width-three-quarters{width:calc(75% - var(--fbre-layout-gap) / 4)}.fbre-popup{background:var(--fbre-surface);border:1px solid var(--fbre-border-light);border-radius:6px;box-shadow:0 4px 12px var(--fbre-shadow-color);left:0;opacity:0;pointer-events:none;position:absolute;top:calc(100% + 4px);transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility .15s;visibility:hidden;z-index:30}.fbre-popup--open{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}.fbre-popup--above{bottom:calc(100% + 4px);top:auto;transform:translateY(4px)}.fbre-popup--above.fbre-popup--open{transform:translateY(0)}[data-style=clean] .fbre-field__label{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase}[data-style=clean] .fbre-field__input-wrap{border-bottom:1px solid var(--fbre-border)}[data-style=clean] .fbre-field__input,[data-style=clean] .fbre-field__adornment,[data-style=clean] .fbre-field__password-toggle{padding:6px 0}[data-style=clean] .fbre-field--focused .fbre-field__input-wrap{border-bottom-color:var(--fbre-theme-color)}[data-style=clean] .fbre-field--error .fbre-field__input-wrap{border-bottom-color:var(--fbre-error)}[data-style=clean] .fbre-field__textarea{border-bottom:1px solid var(--fbre-border);padding:6px 0}[data-style=clean] .fbre-field--focused .fbre-field__textarea{border-bottom-color:var(--fbre-theme-color)}[data-style=clean] .fbre-dropdown__trigger{border-bottom:1px solid var(--fbre-border);padding:6px 0}[data-style=clean] .fbre-divider__line{background:var(--fbre-surface-alt)}[data-style=clean] .fbre-divider__label{color:var(--fbre-text-secondary)}[data-style=clean] .fbre-option-group__label,[data-style=clean] .fbre-computed__label{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase}[data-style=clean] .fbre-group{border:1px solid var(--fbre-surface-alt);padding:12px}[data-style=clean] .fbre-btn{border-radius:2px}[data-style=clean] .fbre-summary__item{border-bottom:1px solid var(--fbre-surface-subtle)}[data-style=clean] .fbre-file__btn{border-radius:2px}[data-style=outlined]{--fbre-layout-gap: 0px}[data-style=outlined] .fbre-component{padding:4px 8px}[data-style=outlined] .fbre-field__label{font-size:13px;font-weight:500}[data-style=outlined] .fbre-field__input-wrap{border:1px solid var(--fbre-border);border-radius:var(--fbre-radius)}[data-style=outlined] .fbre-field__input{padding:8px 10px}[data-style=outlined] .fbre-field__adornment{padding:8px 0 8px 10px}[data-style=outlined] .fbre-field__password-toggle{padding:8px 10px 8px 0}[data-style=outlined] .fbre-field--focused .fbre-field__input-wrap{border-color:var(--fbre-theme-color)}[data-style=outlined] .fbre-field--error .fbre-field__input-wrap{border-color:var(--fbre-error)}[data-style=outlined] .fbre-field__textarea{border:1px solid var(--fbre-border);border-radius:var(--fbre-radius);padding:8px 10px}[data-style=outlined] .fbre-field--focused .fbre-field__textarea{border-color:var(--fbre-theme-color)}[data-style=outlined] .fbre-dropdown__trigger{border:1px solid var(--fbre-border);border-radius:var(--fbre-radius);padding:8px 10px}[data-style=outlined] .fbre-divider__line{background:var(--fbre-surface-alt)}[data-style=outlined] .fbre-divider__label{color:var(--fbre-text-secondary)}[data-style=outlined] .fbre-option-group__label{font-size:13px;font-weight:500}[data-style=outlined] .fbre-group{border:1px solid var(--fbre-border);border-radius:var(--fbre-radius);padding:12px}[data-style=outlined] .fbre-btn{border-radius:var(--fbre-radius)}[data-style=outlined] .fbre-summary__item{border-bottom:1px solid var(--fbre-surface-subtle)}[data-style=outlined] .fbre-file__btn{border-radius:var(--fbre-radius)}[data-style=outlined] .fbre-computed__value{background:var(--fbre-surface-hover);border:1px dashed var(--fbre-border-light);border-radius:var(--fbre-radius);padding:8px 10px}.fbre-remote-loading{align-items:center;display:flex;flex-direction:column;gap:12px;justify-content:center;min-height:200px;padding:40px}.fbre-remote-loading p{color:var(--fbre-text-secondary);font-size:14px;margin:0}.fbre-spinner{animation:fbre-spin .8s linear infinite;border:3px solid var(--fbre-border-light);border-radius:50%;border-top-color:var(--fbre-theme-color);height:32px;width:32px}@keyframes fbre-spin{to{transform:rotate(360deg)}}.fbre-remote-error{align-items:center;display:flex;flex-direction:column;gap:8px;justify-content:center;min-height:200px;padding:40px}.fbre-remote-error p{color:var(--fbre-text);font-size:16px;font-weight:600;margin:0}.fbre-remote-error__detail{color:var(--fbre-text-secondary)!important;font-size:13px!important;font-weight:400!important}.fbre-container[data-mode=dark]{--fbre-theme-color: #42a5f5;--fbre-theme-light: #1a2332;--fbre-theme-dark: #1e88e5;--fbre-error: #ef5350;--fbre-error-light: #2c1b1b;--fbre-text: #e0e0e0;--fbre-text-secondary: #9e9e9e;--fbre-bg: #121212;--fbre-border: #444;--fbre-surface: #1e1e1e;--fbre-surface-hover: #2a2a2a;--fbre-surface-alt: #333;--fbre-surface-subtle: #2a2a2a;--fbre-border-light: #444;--fbre-border-subtle: #333;--fbre-text-placeholder: #666;--fbre-text-disabled: #555;--fbre-toggle-track: #555;--fbre-control-surface: #e0e0e0;--fbre-on-primary: #fff;--fbre-star-empty: #444;--fbre-star-filled: #ffca28;--fbre-slider-track: #444;--fbre-shadow-color: rgba(0, 0, 0, .4)}
|