lib-pixelbuild 0.3.6 → 0.3.7

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.
Files changed (4) hide show
  1. package/dist/designSystem/baseCss.d.ts +1 -1
  2. package/dist/designSystem/baseCss.js +3 -0
  3. package/dist/renderers/BlockRenderer.js +1 -1
  4. package/package.json +1 -1
package/dist/designSystem/baseCss.d.ts CHANGED
@@ -5,4 +5,4 @@
5
5
  * valores de destaque usam `var(--pb-*)` com fallback, então o design system
6
6
  * (Etapa 1) sobrescreve os tokens sem tocar nestes estilos.
7
7
  */
8
- export declare const baseCss = "\n/* \u2500\u2500\u2500 Reset e tipografia base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-root, .pb-root *, .pb-root *::before, .pb-root *::after {\n box-sizing: border-box;\n}\n.pb-root {\n margin: 0;\n font-family: var(--pb-font-family, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);\n font-size: var(--pb-font-size-base, 16px);\n line-height: var(--pb-line-height, 1.6);\n color: var(--pb-color-text, #1f2937);\n background-color: var(--pb-color-background, #ffffff);\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n}\n.pb-root h1, .pb-root h2, .pb-root h3, .pb-root h4, .pb-root h5, .pb-root h6 {\n margin: 0 0 0.5em;\n font-weight: var(--pb-font-weight-bold, 700);\n line-height: 1.2;\n color: var(--pb-color-heading, #111827);\n}\n.pb-root img {\n max-width: 100%;\n height: auto;\n}\n.pb-root a {\n color: var(--pb-color-primary, #f58220);\n text-decoration: none;\n}\n.pb-root a:hover {\n text-decoration: underline;\n}\n\n/* \u2500\u2500\u2500 Layout: container / grade \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-container {\n width: 100%;\n margin-inline: auto;\n padding-inline: var(--pb-gutter, 1.5rem);\n}\n.pb-container-fluid {\n max-width: none !important;\n padding-inline: var(--pb-gutter, 1.5rem);\n}\n@media (min-width: 576px) {\n .pb-container { max-width: 540px; }\n}\n@media (min-width: 768px) {\n .pb-container { max-width: 720px; }\n}\n@media (min-width: 992px) {\n .pb-container { max-width: 960px; }\n}\n@media (min-width: 1200px) {\n .pb-container { max-width: 1140px; }\n}\n@media (min-width: 1400px) {\n .pb-container { max-width: 1320px; }\n}\n\n.pb-row {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--pb-gutter, 1.5rem);\n}\n.pb-col {\n min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Bot\u00F5es \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5em;\n padding: 0.5em 1.25em;\n font-family: inherit;\n font-size: 1rem;\n font-weight: var(--pb-font-weight-bold, 700);\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n border: 1px solid transparent;\n border-radius: var(--pb-radius-md, 8px);\n cursor: pointer;\n transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;\n}\n.pb-button:hover { text-decoration: none; }\n.pb-button:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.pb-button-primary {\n background-color: var(--pb-color-primary, #f58220);\n border-color: var(--pb-color-primary, #f58220);\n color: #ffffff;\n}\n.pb-button-primary:hover:not(:disabled) {\n background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n}\n.pb-button-secondary {\n background-color: var(--pb-color-secondary, #64748b);\n border-color: var(--pb-color-secondary, #64748b);\n color: #ffffff;\n}\n.pb-button-success {\n background-color: var(--pb-color-success, #16a34a);\n border-color: var(--pb-color-success, #16a34a);\n color: #ffffff;\n}\n.pb-button-danger {\n background-color: var(--pb-color-danger, #dc2626);\n border-color: var(--pb-color-danger, #dc2626);\n color: #ffffff;\n}\n.pb-button-warning {\n background-color: var(--pb-color-warning, #f59e0b);\n border-color: var(--pb-color-warning, #f59e0b);\n color: #1f2937;\n}\n.pb-button-info {\n background-color: var(--pb-color-info, #0ea5e9);\n border-color: var(--pb-color-info, #0ea5e9);\n color: #ffffff;\n}\n.pb-button-light {\n background-color: var(--pb-color-light, #f8fafc);\n border-color: var(--pb-color-border, #e5e7eb);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-button-dark {\n background-color: var(--pb-color-dark, #0f172a);\n border-color: var(--pb-color-dark, #0f172a);\n color: #ffffff;\n}\n.pb-button-outline-primary {\n background-color: transparent;\n border-color: var(--pb-color-primary, #f58220);\n color: var(--pb-color-primary, #f58220);\n}\n.pb-button-outline-primary:hover:not(:disabled) {\n background-color: var(--pb-color-primary, #f58220);\n color: #ffffff;\n}\n.pb-button-outline-secondary {\n background-color: transparent;\n border-color: var(--pb-color-secondary, #64748b);\n color: var(--pb-color-secondary, #64748b);\n}\n.pb-button-outline-secondary:hover:not(:disabled) {\n background-color: var(--pb-color-secondary, #64748b);\n color: #ffffff;\n}\n.pb-button-link {\n background-color: transparent;\n border-color: transparent;\n color: var(--pb-color-primary, #f58220);\n padding-inline: 0.5em;\n}\n.pb-button-sm {\n padding: 0.375em 0.875em;\n font-size: 0.875rem;\n border-radius: var(--pb-radius-sm, 4px);\n}\n.pb-button-lg {\n padding: 0.625em 1.5em;\n font-size: 1.125rem;\n border-radius: var(--pb-radius-lg, 12px);\n}\n\n/* \u2500\u2500\u2500 Spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-spinner {\n display: inline-block;\n width: 1.5rem;\n height: 1.5rem;\n border: 0.2em solid currentColor;\n border-right-color: transparent;\n border-radius: 50%;\n animation: pb-spin 0.75s linear infinite;\n vertical-align: -0.25em;\n}\n.pb-spinner-sm {\n width: 1rem;\n height: 1rem;\n border-width: 0.18em;\n}\n@keyframes pb-spin {\n to { transform: rotate(360deg); }\n}\n\n/* \u2500\u2500\u2500 Alertas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-alert {\n padding: var(--pb-space-md, 16px) var(--pb-space-lg, 24px);\n border: 1px solid;\n border-radius: var(--pb-radius-md, 8px);\n margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-alert-title {\n font-weight: var(--pb-font-weight-bold, 700);\n margin-bottom: 0.25em;\n}\n.pb-alert-primary {\n background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 10%, #fff);\n border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 35%, #fff);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-info {\n background-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 10%, #fff);\n border-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 35%, #fff);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-success {\n background-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 10%, #fff);\n border-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 35%, #fff);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-warning {\n background-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 12%, #fff);\n border-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 35%, #fff);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-danger {\n background-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 10%, #fff);\n border-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 35%, #fff);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-secondary {\n background-color: var(--pb-color-light, #f8fafc);\n border-color: var(--pb-color-border, #e5e7eb);\n color: var(--pb-color-text, #1f2937);\n}\n\n/* \u2500\u2500\u2500 Formul\u00E1rios \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-form-group {\n margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-form-label {\n display: block;\n margin-bottom: 0.375rem;\n font-weight: var(--pb-font-weight-bold, 700);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-form-control,\n.pb-form-select,\n.pb-form-textarea {\n display: block;\n width: 100%;\n padding: 0.5em 0.75em;\n font-family: inherit;\n font-size: 1rem;\n line-height: 1.5;\n color: var(--pb-color-text, #1f2937);\n background-color: var(--pb-color-surface, #ffffff);\n border: 1px solid var(--pb-color-border, #e5e7eb);\n border-radius: var(--pb-radius-sm, 4px);\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.pb-form-control:focus,\n.pb-form-select:focus,\n.pb-form-textarea:focus {\n outline: none;\n border-color: var(--pb-color-primary, #f58220);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-color-primary, #f58220) 20%, transparent);\n}\n.pb-form-control-invalid,\n.pb-form-select-invalid,\n.pb-form-textarea-invalid {\n border-color: var(--pb-color-danger, #dc2626);\n}\n.pb-invalid-feedback {\n display: block;\n margin-top: 0.375rem;\n font-size: 0.875rem;\n color: var(--pb-color-danger, #dc2626);\n}\n.pb-form-check {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.pb-form-check-input {\n width: 1.1em;\n height: 1.1em;\n accent-color: var(--pb-color-primary, #f58220);\n flex-shrink: 0;\n}\n.pb-form-check-label {\n font-weight: normal;\n margin-bottom: 0;\n}\n\n/* \u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-header {\n width: 100%;\n}\n.pb-header-inner {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: var(--pb-space-md, 16px);\n flex-wrap: wrap;\n padding-block: var(--pb-space-sm, 8px);\n}\n.pb-brand {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n flex-shrink: 0;\n}\n.pb-brand img {\n max-height: 56px;\n width: auto;\n}\n.pb-nav {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n flex-wrap: wrap;\n min-width: 0;\n}\n.pb-nav-link {\n display: inline-block;\n padding: 0.5rem 0.75rem;\n color: inherit;\n text-decoration: none;\n font-weight: 500;\n border-bottom: 2px solid transparent;\n transition: color 0.2s ease, border-color 0.2s ease;\n}\n.pb-nav-link:hover {\n text-decoration: none;\n opacity: 0.85;\n}\n.pb-nav-link-active {\n border-bottom-color: currentColor;\n}\n.pb-nav-toggle {\n display: none;\n padding: 0.375rem 0.625rem;\n font-size: 1.25rem;\n line-height: 1;\n background: transparent;\n border: 1px solid var(--pb-color-border, #e5e7eb);\n border-radius: var(--pb-radius-sm, 4px);\n cursor: pointer;\n color: inherit;\n}\n@media (max-width: 991.98px) {\n .pb-nav-toggle { display: inline-flex; align-items: center; }\n .pb-nav { display: none; }\n .pb-nav-open { display: flex; flex-direction: column; width: 100%; }\n}\n\n/* \u2500\u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-footer {\n width: 100%;\n padding-block: var(--pb-space-xl, 32px);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-footer-divider {\n border: none;\n border-top: 1px solid var(--pb-color-border, #e5e7eb);\n margin: var(--pb-space-lg, 24px) 0;\n}\n.pb-social-icons {\n display: flex;\n justify-content: center;\n gap: var(--pb-space-sm, 8px);\n flex-wrap: wrap;\n}\n.pb-social-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n color: inherit;\n text-decoration: none;\n}\n.pb-social-icon:hover {\n text-decoration: none;\n opacity: 0.8;\n}\n\n/* \u2500\u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-loading {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--pb-space-sm, 8px);\n font-weight: 600;\n letter-spacing: 0.08em;\n}\n\n/* \u2500\u2500\u2500 Utilit\u00E1rios de alinhamento \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-text-center { text-align: center; }\n.pb-mb-0 { margin-bottom: 0; }\n";
8
+ export declare const baseCss = "\n/* \u2500\u2500\u2500 Reset e tipografia base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-root, .pb-root *, .pb-root *::before, .pb-root *::after {\n box-sizing: border-box;\n}\n.pb-root {\n margin: 0;\n font-family: var(--pb-font-family, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);\n font-size: var(--pb-font-size-base, 16px);\n line-height: var(--pb-line-height, 1.6);\n color: var(--pb-color-text, #1f2937);\n background-color: var(--pb-color-background, #ffffff);\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n}\n.pb-root h1, .pb-root h2, .pb-root h3, .pb-root h4, .pb-root h5, .pb-root h6 {\n margin: 0 0 0.5em;\n font-weight: var(--pb-font-weight-bold, 700);\n line-height: 1.2;\n color: var(--pb-color-heading, #111827);\n}\n.pb-root p {\n margin: 0;\n}\n.pb-root img {\n max-width: 100%;\n height: auto;\n}\n.pb-root a {\n color: var(--pb-color-primary, #f58220);\n text-decoration: none;\n}\n.pb-root a:hover {\n text-decoration: underline;\n}\n\n/* \u2500\u2500\u2500 Layout: container / grade \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-container {\n width: 100%;\n margin-inline: auto;\n padding-inline: var(--pb-gutter, 1.5rem);\n}\n.pb-container-fluid {\n max-width: none !important;\n padding-inline: var(--pb-gutter, 1.5rem);\n}\n@media (min-width: 576px) {\n .pb-container { max-width: 540px; }\n}\n@media (min-width: 768px) {\n .pb-container { max-width: 720px; }\n}\n@media (min-width: 992px) {\n .pb-container { max-width: 960px; }\n}\n@media (min-width: 1200px) {\n .pb-container { max-width: 1140px; }\n}\n@media (min-width: 1400px) {\n .pb-container { max-width: 1320px; }\n}\n\n.pb-row {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--pb-gutter, 1.5rem);\n}\n.pb-col {\n min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Bot\u00F5es \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5em;\n padding: 0.5em 1.25em;\n font-family: inherit;\n font-size: 1rem;\n font-weight: var(--pb-font-weight-bold, 700);\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n border: 1px solid transparent;\n border-radius: var(--pb-radius-md, 8px);\n cursor: pointer;\n transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;\n}\n.pb-button:hover { text-decoration: none; }\n.pb-button:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.pb-button-primary {\n background-color: var(--pb-color-primary, #f58220);\n border-color: var(--pb-color-primary, #f58220);\n color: #ffffff;\n}\n.pb-button-primary:hover:not(:disabled) {\n background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n}\n.pb-button-secondary {\n background-color: var(--pb-color-secondary, #64748b);\n border-color: var(--pb-color-secondary, #64748b);\n color: #ffffff;\n}\n.pb-button-success {\n background-color: var(--pb-color-success, #16a34a);\n border-color: var(--pb-color-success, #16a34a);\n color: #ffffff;\n}\n.pb-button-danger {\n background-color: var(--pb-color-danger, #dc2626);\n border-color: var(--pb-color-danger, #dc2626);\n color: #ffffff;\n}\n.pb-button-warning {\n background-color: var(--pb-color-warning, #f59e0b);\n border-color: var(--pb-color-warning, #f59e0b);\n color: #1f2937;\n}\n.pb-button-info {\n background-color: var(--pb-color-info, #0ea5e9);\n border-color: var(--pb-color-info, #0ea5e9);\n color: #ffffff;\n}\n.pb-button-light {\n background-color: var(--pb-color-light, #f8fafc);\n border-color: var(--pb-color-border, #e5e7eb);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-button-dark {\n background-color: var(--pb-color-dark, #0f172a);\n border-color: var(--pb-color-dark, #0f172a);\n color: #ffffff;\n}\n.pb-button-outline-primary {\n background-color: transparent;\n border-color: var(--pb-color-primary, #f58220);\n color: var(--pb-color-primary, #f58220);\n}\n.pb-button-outline-primary:hover:not(:disabled) {\n background-color: var(--pb-color-primary, #f58220);\n color: #ffffff;\n}\n.pb-button-outline-secondary {\n background-color: transparent;\n border-color: var(--pb-color-secondary, #64748b);\n color: var(--pb-color-secondary, #64748b);\n}\n.pb-button-outline-secondary:hover:not(:disabled) {\n background-color: var(--pb-color-secondary, #64748b);\n color: #ffffff;\n}\n.pb-button-link {\n background-color: transparent;\n border-color: transparent;\n color: var(--pb-color-primary, #f58220);\n padding-inline: 0.5em;\n}\n.pb-button-sm {\n padding: 0.375em 0.875em;\n font-size: 0.875rem;\n border-radius: var(--pb-radius-sm, 4px);\n}\n.pb-button-lg {\n padding: 0.625em 1.5em;\n font-size: 1.125rem;\n border-radius: var(--pb-radius-lg, 12px);\n}\n\n/* \u2500\u2500\u2500 Spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-spinner {\n display: inline-block;\n width: 1.5rem;\n height: 1.5rem;\n border: 0.2em solid currentColor;\n border-right-color: transparent;\n border-radius: 50%;\n animation: pb-spin 0.75s linear infinite;\n vertical-align: -0.25em;\n}\n.pb-spinner-sm {\n width: 1rem;\n height: 1rem;\n border-width: 0.18em;\n}\n@keyframes pb-spin {\n to { transform: rotate(360deg); }\n}\n\n/* \u2500\u2500\u2500 Alertas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-alert {\n padding: var(--pb-space-md, 16px) var(--pb-space-lg, 24px);\n border: 1px solid;\n border-radius: var(--pb-radius-md, 8px);\n margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-alert-title {\n font-weight: var(--pb-font-weight-bold, 700);\n margin-bottom: 0.25em;\n}\n.pb-alert-primary {\n background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 10%, #fff);\n border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 35%, #fff);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-info {\n background-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 10%, #fff);\n border-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 35%, #fff);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-success {\n background-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 10%, #fff);\n border-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 35%, #fff);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-warning {\n background-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 12%, #fff);\n border-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 35%, #fff);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-danger {\n background-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 10%, #fff);\n border-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 35%, #fff);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-secondary {\n background-color: var(--pb-color-light, #f8fafc);\n border-color: var(--pb-color-border, #e5e7eb);\n color: var(--pb-color-text, #1f2937);\n}\n\n/* \u2500\u2500\u2500 Formul\u00E1rios \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-form-group {\n margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-form-label {\n display: block;\n margin-bottom: 0.375rem;\n font-weight: var(--pb-font-weight-bold, 700);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-form-control,\n.pb-form-select,\n.pb-form-textarea {\n display: block;\n width: 100%;\n padding: 0.5em 0.75em;\n font-family: inherit;\n font-size: 1rem;\n line-height: 1.5;\n color: var(--pb-color-text, #1f2937);\n background-color: var(--pb-color-surface, #ffffff);\n border: 1px solid var(--pb-color-border, #e5e7eb);\n border-radius: var(--pb-radius-sm, 4px);\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.pb-form-control:focus,\n.pb-form-select:focus,\n.pb-form-textarea:focus {\n outline: none;\n border-color: var(--pb-color-primary, #f58220);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-color-primary, #f58220) 20%, transparent);\n}\n.pb-form-control-invalid,\n.pb-form-select-invalid,\n.pb-form-textarea-invalid {\n border-color: var(--pb-color-danger, #dc2626);\n}\n.pb-invalid-feedback {\n display: block;\n margin-top: 0.375rem;\n font-size: 0.875rem;\n color: var(--pb-color-danger, #dc2626);\n}\n.pb-form-check {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.pb-form-check-input {\n width: 1.1em;\n height: 1.1em;\n accent-color: var(--pb-color-primary, #f58220);\n flex-shrink: 0;\n}\n.pb-form-check-label {\n font-weight: normal;\n margin-bottom: 0;\n}\n\n/* \u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-header {\n width: 100%;\n}\n.pb-header-inner {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: var(--pb-space-md, 16px);\n flex-wrap: wrap;\n padding-block: var(--pb-space-sm, 8px);\n}\n.pb-brand {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n flex-shrink: 0;\n}\n.pb-brand img {\n max-height: 56px;\n width: auto;\n}\n.pb-nav {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n flex-wrap: wrap;\n min-width: 0;\n}\n.pb-nav-link {\n display: inline-block;\n padding: 0.5rem 0.75rem;\n color: inherit;\n text-decoration: none;\n font-weight: 500;\n border-bottom: 2px solid transparent;\n transition: color 0.2s ease, border-color 0.2s ease;\n}\n.pb-nav-link:hover {\n text-decoration: none;\n opacity: 0.85;\n}\n.pb-nav-link-active {\n border-bottom-color: currentColor;\n}\n.pb-nav-toggle {\n display: none;\n padding: 0.375rem 0.625rem;\n font-size: 1.25rem;\n line-height: 1;\n background: transparent;\n border: 1px solid var(--pb-color-border, #e5e7eb);\n border-radius: var(--pb-radius-sm, 4px);\n cursor: pointer;\n color: inherit;\n}\n@media (max-width: 991.98px) {\n .pb-nav-toggle { display: inline-flex; align-items: center; }\n .pb-nav { display: none; }\n .pb-nav-open { display: flex; flex-direction: column; width: 100%; }\n}\n\n/* \u2500\u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-footer {\n width: 100%;\n padding-block: var(--pb-space-xl, 32px);\n color: var(--pb-color-text, #1f2937);\n}\n.pb-footer-divider {\n border: none;\n border-top: 1px solid var(--pb-color-border, #e5e7eb);\n margin: var(--pb-space-lg, 24px) 0;\n}\n.pb-social-icons {\n display: flex;\n justify-content: center;\n gap: var(--pb-space-sm, 8px);\n flex-wrap: wrap;\n}\n.pb-social-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n color: inherit;\n text-decoration: none;\n}\n.pb-social-icon:hover {\n text-decoration: none;\n opacity: 0.8;\n}\n\n/* \u2500\u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-loading {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--pb-space-sm, 8px);\n font-weight: 600;\n letter-spacing: 0.08em;\n}\n\n/* \u2500\u2500\u2500 Utilit\u00E1rios de alinhamento \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-text-center { text-align: center; }\n.pb-mb-0 { margin-bottom: 0; }\n";
package/dist/designSystem/baseCss.js CHANGED
@@ -26,6 +26,9 @@ export const baseCss = `
26
26
  line-height: 1.2;
27
27
  color: var(--pb-color-heading, #111827);
28
28
  }
29
+ .pb-root p {
30
+ margin: 0;
31
+ }
29
32
  .pb-root img {
30
33
  max-width: 100%;
31
34
  height: auto;
package/dist/renderers/BlockRenderer.js CHANGED
@@ -29,7 +29,7 @@ const BlockGrid = memo(function BlockGrid({ block, editionMode, componentDefault
29
29
  ].join('');
30
30
  })
31
31
  .join('');
32
- return `.${grid}{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pb-gutter,1rem)}${rules}`;
32
+ return `.${grid}{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0}${rules}`;
33
33
  }, [grid, components]);
34
34
  if (editionMode && components.length === 0) {
35
35
  return (_jsxs("div", { "data-pixelbuild-empty-block": block.id, style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lib-pixelbuild",
3
- "version": "0.3.6",
3
+ "version": "0.3.7",
4
4
  "engines": {
5
5
  "node": "^24.0.0",
6
6
  "npm": ">=10"