@customviews-js/customviews 1.1.0 → 1.1.2

package/dist/types/styles/toggle-styles.d.ts

@@ -1,5 +1,5 @@
 /**
  * Styles for toggle visibility and animations
  */
-export declare const TOGGLE_STYLES = "\n/* Core toggle visibility transitions */\n[data-cv-toggle], [data-customviews-toggle] {\n  transition: opacity 150ms ease,\n              transform 150ms ease,\n              max-height 200ms ease,\n              margin 150ms ease;\n  will-change: opacity, transform, max-height, margin;\n}\n\n.cv-visible {\n  opacity: 1 !important;\n  transform: translateY(0) !important;\n  max-height: var(--cv-max-height, 9999px) !important;\n}\n\n.cv-hidden {\n  opacity: 0 !important;\n  transform: translateY(-4px) !important;\n  pointer-events: none !important;\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n  border-top-width: 0 !important;\n  border-bottom-width: 0 !important;\n  max-height: 0 !important;\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n  overflow: hidden !important;\n}\n";
+export declare const TOGGLE_STYLES = "\n/* Core toggle visibility transitions */\n[data-cv-toggle], [data-customviews-toggle], cv-toggle {\n  transition: opacity 150ms ease,\n              transform 150ms ease,\n              max-height 200ms ease,\n              margin 150ms ease;\n  will-change: opacity, transform, max-height, margin;\n}\n\n.cv-visible {\n  opacity: 1 !important;\n  transform: translateY(0) !important;\n  max-height: var(--cv-max-height, 9999px) !important;\n}\n\n.cv-hidden {\n  opacity: 0 !important;\n  transform: translateY(-4px) !important;\n  pointer-events: none !important;\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n  border-top-width: 0 !important;\n  border-bottom-width: 0 !important;\n  max-height: 0 !important;\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n  overflow: hidden !important;\n}\n";
 //# sourceMappingURL=toggle-styles.d.ts.map

package/dist/types/styles/toggle-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/toggle-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,aAAa,uzBA6BzB,CAAC"}
+{"version":3,"file":"toggle-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/toggle-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,aAAa,k0BA6BzB,CAAC"}

package/dist/types/styles/widget-styles.d.ts

@@ -5,7 +5,7 @@
  * Note: Styles are kept as a TypeScript string for compatibility with the build system.
  * This approach ensures the styles are properly bundled and don't require separate CSS file handling.
  */
-export declare const WIDGET_STYLES = "\n/* Rounded rectangle widget icon styles */\n.cv-widget-icon {\n  position: fixed;\n  /* Slightly transparent by default so the widget is subtle at the page edge */\n  background: rgba(255, 255, 255, 0.92);\n  color: rgba(0, 0, 0, 0.9);\n  opacity: 0.6;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  font-weight: bold;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  z-index: 9998;\n  transition: all 0.3s ease;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.cv-widget-icon:hover {\n  /* Become fully opaque on hover to improve readability */\n  background: rgba(255, 255, 255, 1);\n  color: rgba(0, 0, 0, 1);\n  opacity: 1;\n}\n\n/* Top-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-top-right {\n  top: 20px;\n  right: 0;\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n/* Top-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-top-left {\n  top: 20px;\n  left: 0;\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Bottom-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-bottom-right {\n  bottom: 20px;\n  right: 0;\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n/* Bottom-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-bottom-left {\n  bottom: 20px;\n  left: 0;\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Middle-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-middle-left {\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Middle-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-middle-right {\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n.cv-widget-top-right,\n.cv-widget-middle-right,\n.cv-widget-bottom-right,\n.cv-widget-top-left,\n.cv-widget-middle-left,\n.cv-widget-bottom-left {\n  height: 36px;\n  width: 36px;\n}\n\n.cv-widget-middle-right:hover,\n.cv-widget-top-right:hover,\n.cv-widget-bottom-right:hover,\n.cv-widget-top-left:hover,\n.cv-widget-middle-left:hover,\n.cv-widget-bottom-left:hover {\n  width: 55px;\n}\n\n/* Modal content styles */\n.cv-widget-section {\n  margin-bottom: 16px;\n}\n\n.cv-widget-section:last-child {\n  margin-bottom: 0;\n}\n\n.cv-widget-section label {\n  display: block;\n  margin-bottom: 4px;\n  font-weight: 500;\n  color: #555;\n}\n\n.cv-widget-profile-select,\n.cv-widget-state-select {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: white;\n  font-size: 14px;\n}\n\n.cv-widget-profile-select:focus,\n.cv-widget-state-select:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n.cv-widget-profile-select:disabled,\n.cv-widget-state-select:disabled {\n  background: #f8f9fa;\n  color: #6c757d;\n  cursor: not-allowed;\n}\n\n.cv-widget-current {\n  margin: 16px 0;\n  padding: 12px;\n  background: #f8f9fa;\n  border-radius: 4px;\n  border-left: 4px solid #007bff;\n}\n\n.cv-widget-current label {\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #666;\n  margin-bottom: 4px;\n}\n\n.cv-widget-current-view {\n  font-weight: 500;\n  color: #333;\n}\n\n.cv-widget-reset {\n  width: 100%;\n  padding: 8px 16px;\n  background: #dc3545;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.cv-widget-reset:hover {\n  background: #c82333;\n}\n\n.cv-widget-reset:active {\n  background: #bd2130;\n}\n\n/* Responsive design for mobile */\n@media (max-width: 768px) {\n  .cv-widget-top-right,\n  .cv-widget-top-left {\n    top: 10px;\n  }\n\n  .cv-widget-bottom-right,\n  .cv-widget-bottom-left {\n    bottom: 10px;\n  }\n\n  /* All widgets stay flush with screen edges */\n  .cv-widget-top-right,\n  .cv-widget-bottom-right,\n  .cv-widget-middle-right {\n    right: 0;\n  }\n\n  .cv-widget-top-left,\n  .cv-widget-bottom-left,\n  .cv-widget-middle-left {\n    left: 0;\n  }\n\n  /* Slightly smaller on mobile */\n  .cv-widget-icon {\n    width: 60px;\n    height: 32px;\n  }\n\n  .cv-widget-icon:hover {\n    width: 75px;\n  }\n}\n\n/* Modal styles */\n.cv-widget-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10002;\n  animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.cv-widget-modal {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n  max-width: 400px;\n  width: 90vw;\n  max-height: 80vh;\n  overflow-y: auto;\n  animation: slideIn 0.2s ease;\n}\n\n@keyframes slideIn {\n  from { \n    opacity: 0;\n    transform: scale(0.9) translateY(-20px);\n  }\n  to { \n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n.cv-widget-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e9ecef;\n  background: #f8f9fa;\n  border-radius: 8px 8px 0 0;\n}\n\n.cv-widget-modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #333;\n}\n\n.cv-widget-modal-close {\n  background: none;\n  border: none;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 0;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  color: #666;\n}\n\n.cv-widget-modal-close:hover {\n  background: #e9ecef;\n}\n\n.cv-widget-modal-content {\n  padding: 20px;\n}\n\n.cv-widget-modal-actions {\n  margin-top: 20px;\n  padding-top: 16px;\n  border-top: 1px solid #e9ecef;\n}\n\n.cv-widget-restore {\n  width: 100%;\n  padding: 10px 16px;\n  background: #28a745;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.cv-widget-restore:hover {\n  background: #218838;\n}\n\n.cv-widget-create-state {\n  width: 100%;\n  padding: 10px 16px;\n  background: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  margin-bottom: 10px;\n}\n\n.cv-widget-create-state:hover {\n  background: #0056b3;\n}\n\n/* Dark theme modal styles */\n.cv-widget-theme-dark .cv-widget-modal {\n  background: #2d3748;\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-header {\n  background: #1a202c;\n  border-color: #4a5568;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-header h3 {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-close {\n  color: #a0aec0;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-close:hover {\n  background: #4a5568;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-actions {\n  border-color: #4a5568;\n}\n\n/* Custom state creator styles */\n.cv-custom-state-modal {\n  max-width: 500px;\n}\n\n.cv-custom-state-form h4 {\n  margin: 20px 0 10px 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n  border-bottom: 1px solid #e9ecef;\n  padding-bottom: 5px;\n}\n\n.cv-custom-state-section {\n  margin-bottom: 16px;\n}\n\n.cv-custom-state-section label {\n  display: block;\n  margin-bottom: 4px;\n  font-weight: 500;\n  color: #555;\n}\n\n.cv-custom-state-input {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: white;\n  font-size: 14px;\n}\n\n.cv-custom-state-input:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n.cv-custom-toggles {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 10px;\n}\n\n.cv-custom-state-toggle {\n  display: flex;\n  align-items: center;\n}\n\n.cv-custom-state-toggle label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-weight: normal;\n  margin: 0;\n}\n\n.cv-custom-toggle-checkbox {\n  margin-right: 8px;\n  width: auto;\n}\n\n.cv-tab-groups {\n  margin-top: 20px;\n}\n\n.cv-tab-group-control {\n  margin-bottom: 15px;\n}\n\n.cv-tab-group-control label {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.cv-tab-group-select {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #ced4da;\n  border-radius: 4px;\n  font-size: 14px;\n  background-color: white;\n  cursor: pointer;\n}\n\n.cv-tab-group-select:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n}\n\n.cv-widget-theme-dark .cv-tab-group-select {\n  background-color: #2d3748;\n  border-color: #4a5568;\n  color: #e2e8f0;\n}\n\n.cv-custom-state-actions {\n  display: flex;\n  gap: 10px;\n  margin-top: 20px;\n  padding-top: 16px;\n  border-top: 1px solid #e9ecef;\n}\n\n.cv-custom-state-cancel,\n.cv-custom-state-copy-url {\n  flex: 1;\n  padding: 10px 16px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.cv-custom-state-reset {\n  flex: 1;\n  padding: 10px 16px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  background: #dc3545;\n  color: white;\n}\n\n.cv-custom-state-reset:hover {\n  background: #c82333;\n}\n\n.cv-custom-state-cancel {\n  background: #6c757d;\n  color: white;\n}\n\n.cv-custom-state-cancel:hover {\n  background: #5a6268;\n}\n\n.cv-custom-state-copy-url {\n  background: #28a745;\n  color: white;\n}\n\n.cv-custom-state-copy-url:hover {\n  background: #218838;\n}\n\n/* Dark theme custom state styles */\n.cv-widget-theme-dark .cv-custom-state-form h4 {\n  color: #e2e8f0;\n  border-color: #4a5568;\n}\n\n.cv-widget-theme-dark .cv-custom-state-section label {\n  color: #a0aec0;\n}\n\n.cv-widget-theme-dark .cv-custom-state-input {\n  background: #1a202c;\n  border-color: #4a5568;\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-custom-state-actions {\n  border-color: #4a5568;\n}\n\n/* Welcome modal styles */\n.cv-welcome-modal {\n  max-width: 500px;\n}\n\n.cv-welcome-content {\n  text-align: center;\n}\n\n.cv-welcome-content p {\n  font-size: 15px;\n  line-height: 1.6;\n  color: #555;\n  margin-bottom: 24px;\n}\n\n.cv-welcome-widget-preview {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  background: #f8f9fa;\n  border-radius: 8px;\n  margin-bottom: 24px;\n}\n\n.cv-welcome-widget-icon {\n  width: 36px;\n  height: 36px;\n  background: white;\n  color: black;\n  border-radius: 0 18px 18px 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.cv-welcome-widget-label {\n  font-size: 14px;\n  color: #666;\n  margin: 0;\n  font-weight: 500;\n}\n\n.cv-welcome-got-it {\n  width: 100%;\n  padding: 12px 24px;\n  background: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 16px;\n  font-weight: 600;\n  transition: background 0.2s ease;\n}\n\n.cv-welcome-got-it:hover {\n  background: #0056b3;\n}\n\n.cv-welcome-got-it:active {\n  background: #004494;\n}\n\n/* Dark theme welcome modal styles */\n.cv-widget-theme-dark .cv-welcome-content p {\n  color: #cbd5e0;\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-preview {\n  background: #1a202c;\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-label {\n  color: #a0aec0;\n}\n";
+export declare const WIDGET_STYLES = "\n/* Rounded rectangle widget icon styles */\n.cv-widget-icon {\n  position: fixed;\n  /* Slightly transparent by default so the widget is subtle at the page edge */\n  background: rgba(255, 255, 255, 0.92);\n  color: rgba(0, 0, 0, 0.9);\n  opacity: 0.6;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  font-weight: bold;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  z-index: 9998;\n  transition: all 0.3s ease;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.cv-widget-icon:hover {\n  /* Become fully opaque on hover to improve readability */\n  background: rgba(255, 255, 255, 1);\n  color: rgba(0, 0, 0, 1);\n  opacity: 1;\n}\n\n/* Top-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-top-right {\n  top: 20px;\n  right: 0;\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n/* Top-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-top-left {\n  top: 20px;\n  left: 0;\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Bottom-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-bottom-right {\n  bottom: 20px;\n  right: 0;\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n/* Bottom-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-bottom-left {\n  bottom: 20px;\n  left: 0;\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Middle-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-middle-left {\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Middle-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-middle-right {\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n.cv-widget-top-right,\n.cv-widget-middle-right,\n.cv-widget-bottom-right,\n.cv-widget-top-left,\n.cv-widget-middle-left,\n.cv-widget-bottom-left {\n  height: 36px;\n  width: 36px;\n}\n\n.cv-widget-middle-right:hover,\n.cv-widget-top-right:hover,\n.cv-widget-bottom-right:hover,\n.cv-widget-top-left:hover,\n.cv-widget-middle-left:hover,\n.cv-widget-bottom-left:hover {\n  width: 55px;\n}\n\n/* Modal content styles */\n.cv-widget-section {\n  margin-bottom: 16px;\n}\n\n.cv-widget-section:last-child {\n  margin-bottom: 0;\n}\n\n.cv-widget-section label {\n  display: block;\n  margin-bottom: 4px;\n  font-weight: 500;\n  color: #555;\n}\n\n.cv-widget-profile-select,\n.cv-widget-state-select {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: white;\n  font-size: 14px;\n}\n\n.cv-widget-profile-select:focus,\n.cv-widget-state-select:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n.cv-widget-profile-select:disabled,\n.cv-widget-state-select:disabled {\n  background: #f8f9fa;\n  color: #6c757d;\n  cursor: not-allowed;\n}\n\n.cv-widget-current {\n  margin: 16px 0;\n  padding: 12px;\n  background: #f8f9fa;\n  border-radius: 4px;\n  border-left: 4px solid #007bff;\n}\n\n.cv-widget-current label {\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #666;\n  margin-bottom: 4px;\n}\n\n.cv-widget-current-view {\n  font-weight: 500;\n  color: #333;\n}\n\n.cv-widget-reset {\n  width: 100%;\n  padding: 8px 16px;\n  background: #dc3545;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.cv-widget-reset:hover {\n  background: #c82333;\n}\n\n.cv-widget-reset:active {\n  background: #bd2130;\n}\n\n/* Responsive design for mobile */\n@media (max-width: 768px) {\n  .cv-widget-top-right,\n  .cv-widget-top-left {\n    top: 10px;\n  }\n\n  .cv-widget-bottom-right,\n  .cv-widget-bottom-left {\n    bottom: 10px;\n  }\n\n  /* All widgets stay flush with screen edges */\n  .cv-widget-top-right,\n  .cv-widget-bottom-right,\n  .cv-widget-middle-right {\n    right: 0;\n  }\n\n  .cv-widget-top-left,\n  .cv-widget-bottom-left,\n  .cv-widget-middle-left {\n    left: 0;\n  }\n\n  /* Slightly smaller on mobile */\n  .cv-widget-icon {\n    width: 60px;\n    height: 32px;\n  }\n\n  .cv-widget-icon:hover {\n    width: 75px;\n  }\n}\n\n/* Modal styles */\n.cv-widget-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10002;\n  animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.cv-widget-modal {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n  max-width: 400px;\n  width: 90vw;\n  max-height: 80vh;\n  overflow-y: auto;\n  animation: slideIn 0.2s ease;\n}\n\n@keyframes slideIn {\n  from { \n    opacity: 0;\n    transform: scale(0.9) translateY(-20px);\n  }\n  to { \n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n.cv-widget-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e9ecef;\n  background: #f8f9fa;\n  border-radius: 8px 8px 0 0;\n}\n\n.cv-widget-modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #333;\n}\n\n.cv-widget-modal-close {\n  background: none;\n  border: none;\n  font-size: 20px;\n  cursor: pointer;\n  padding: 0;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  color: #666;\n  line-height: 1;\n  transition: all 0.2s ease;\n}\n\n.cv-widget-modal-close:hover {\n  background: #e9ecef;\n  color: #333;\n}\n\n.cv-widget-modal-content {\n  padding: 20px;\n}\n\n.cv-widget-modal-actions {\n  margin-top: 20px;\n  padding-top: 16px;\n  border-top: 1px solid #e9ecef;\n}\n\n.cv-widget-restore {\n  width: 100%;\n  padding: 10px 16px;\n  background: #28a745;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.cv-widget-restore:hover {\n  background: #218838;\n}\n\n.cv-widget-create-state {\n  width: 100%;\n  padding: 10px 16px;\n  background: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  margin-bottom: 10px;\n}\n\n.cv-widget-create-state:hover {\n  background: #0056b3;\n}\n\n/* Dark theme modal styles */\n.cv-widget-theme-dark .cv-widget-modal {\n  background: #2d3748;\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-header {\n  background: #1a202c;\n  border-color: #4a5568;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-header h3 {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-close {\n  color: #a0aec0;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-close:hover {\n  background: #4a5568;\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-actions {\n  border-color: #4a5568;\n}\n\n/* Custom state creator styles */\n.cv-custom-state-modal {\n  max-width: 500px;\n}\n\n.cv-custom-state-form h4 {\n  margin: 20px 0 10px 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n  border-bottom: 1px solid #e9ecef;\n  padding-bottom: 5px;\n}\n\n.cv-custom-state-form p {\n  font-size: 15px;\n  line-height: 1.6;\n  color: #555;\n  margin-bottom: 24px;\n  text-align: justify;\n}\n\n.cv-custom-state-section {\n  margin-bottom: 16px;\n}\n\n.cv-custom-state-section label {\n  display: block;\n  margin-bottom: 4px;\n  font-weight: 500;\n  color: #555;\n}\n\n.cv-custom-state-input {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: white;\n  font-size: 14px;\n}\n\n.cv-custom-state-input:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n.cv-custom-toggles {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 10px;\n}\n\n.cv-custom-state-toggle {\n  display: flex;\n  align-items: center;\n}\n\n.cv-custom-state-toggle label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-weight: normal;\n  margin: 0;\n}\n\n.cv-custom-toggle-checkbox {\n  margin-right: 8px;\n  width: auto;\n}\n\n.cv-tab-groups {\n  margin-top: 20px;\n}\n\n.cv-tab-group-control {\n  margin-bottom: 15px;\n}\n\n.cv-tab-group-control label {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.cv-tab-group-select {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #ced4da;\n  border-radius: 4px;\n  font-size: 14px;\n  background-color: white;\n  cursor: pointer;\n}\n\n.cv-tab-group-select:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n}\n\n.cv-widget-theme-dark .cv-tab-group-select {\n  background-color: #2d3748;\n  border-color: #4a5568;\n  color: #e2e8f0;\n}\n\n.cv-custom-state-actions {\n  display: flex;\n  gap: 10px;\n  margin-top: 20px;\n  padding-top: 16px;\n  border-top: 1px solid #e9ecef;\n}\n\n.cv-custom-state-cancel,\n.cv-custom-state-copy-url {\n  flex: 1;\n  padding: 10px 16px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.cv-custom-state-reset {\n  flex: 1;\n  padding: 10px 16px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  background: #dc3545;\n  color: white;\n}\n\n.cv-custom-state-reset:hover {\n  background: #c82333;\n}\n\n.cv-custom-state-cancel {\n  background: #6c757d;\n  color: white;\n}\n\n.cv-custom-state-cancel:hover {\n  background: #5a6268;\n}\n\n.cv-custom-state-copy-url {\n  background: #28a745;\n  color: white;\n}\n\n.cv-custom-state-copy-url:hover {\n  background: #218838;\n}\n\n/* Dark theme custom state styles */\n.cv-widget-theme-dark .cv-custom-state-form h4 {\n  color: #e2e8f0;\n  border-color: #4a5568;\n}\n\n.cv-widget-theme-dark .cv-custom-state-form p {\n  color: #cbd5e0;\n}\n\n.cv-widget-theme-dark .cv-custom-state-section label {\n  color: #a0aec0;\n}\n\n.cv-widget-theme-dark .cv-custom-state-input {\n  background: #1a202c;\n  border-color: #4a5568;\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-custom-state-actions {\n  border-color: #4a5568;\n}\n\n/* Welcome modal styles */\n.cv-welcome-modal {\n  max-width: 500px;\n}\n\n.cv-welcome-content {\n  text-align: center;\n}\n\n.cv-welcome-content p {\n  font-size: 15px;\n  line-height: 1.6;\n  color: #555;\n  margin-bottom: 24px;\n  text-align: justify;\n}\n\n.cv-welcome-widget-preview {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  background: #f8f9fa;\n  border-radius: 8px;\n  margin-bottom: 24px;\n}\n\n.cv-welcome-widget-icon {\n  width: 36px;\n  height: 36px;\n  background: white;\n  color: black;\n  border-radius: 0 18px 18px 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.cv-welcome-widget-label {\n  font-size: 14px;\n  color: #666;\n  margin: 0;\n  font-weight: 500;\n}\n\n.cv-welcome-got-it {\n  width: 100%;\n  padding: 12px 24px;\n  background: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 16px;\n  font-weight: 600;\n  transition: background 0.2s ease;\n}\n\n.cv-welcome-got-it:hover {\n  background: #0056b3;\n}\n\n.cv-welcome-got-it:active {\n  background: #004494;\n}\n\n/* Dark theme welcome modal styles */\n.cv-widget-theme-dark .cv-welcome-content p {\n  color: #cbd5e0;\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-preview {\n  background: #1a202c;\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-label {\n  color: #a0aec0;\n}\n";
 /**
  * Inject widget styles into the document head
  */

package/dist/types/styles/widget-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"widget-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/widget-styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,aAAa,ggXA6mBzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAQzC"}
+{"version":3,"file":"widget-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/widget-styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,aAAa,8zXA8nBzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAQzC"}

package/package.json

@@ -1,61 +1,61 @@
-{
-  "name": "@customviews-js/customviews",
-  "version": "1.1.0",
-  "description": "A JavaScript dynamic custom views Library.",
-  "type": "module",
-  "types": "dist/index.d.ts",
-  "main": "dist/custom-views.min.js",
-  "module": "dist/custom-views.core.esm.js",
-  "browser": "dist/custom-views.min.js",
-  "unpkg": "dist/custom-views.min.js",
-  "jsdelivr": "dist/custom-views.min.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/customviews-js/customviews.git"
-  },
-  "files": [
-    "dist/"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/custom-views.min.js",
-      "require": "./dist/custom-views.min.js",
-      "browser": "./dist/custom-views.min.js"
-    },
-    "./core": {
-      "import": "./dist/custom-views.core.esm.js",
-      "require": "./dist/custom-views.core.cjs.js"
-    }
-  },
-  "scripts": {
-    "clean": "rimraf dist",
-    "build:types": "tsc --project tsconfig.json",
-    "build:js": "rollup -c",
-    "build": "npm run clean && npm run build:types && npm run build:js",
-    "dev": "rollup -c -w",
-    "test": "vitest"
-  },
-  "keywords": [
-    "javascript",
-    "library",
-    "custom views"
-  ],
-  "author": "Chan Ger Teck",
-  "license": "MIT",
-  "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.4",
-    "@types/node": "^24.3.1",
-    "jsdom": "^27.0.0",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.46.2",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.2",
-    "vitest": "^3.2.4"
-  },
-  "bugs": {
-    "url": "https://github.com/customviews-js/customviews/issues"
-  },
-  "homepage": "https://github.com/customviews-js/customviews#readme"
-}
+{
+  "name": "@customviews-js/customviews",
+  "version": "1.1.2",
+  "description": "A JavaScript dynamic custom views Library.",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "main": "dist/custom-views.min.js",
+  "module": "dist/custom-views.core.esm.js",
+  "browser": "dist/custom-views.min.js",
+  "unpkg": "dist/custom-views.min.js",
+  "jsdelivr": "dist/custom-views.min.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/customviews-js/customviews.git"
+  },
+  "files": [
+    "dist/"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/custom-views.min.js",
+      "require": "./dist/custom-views.min.js",
+      "browser": "./dist/custom-views.min.js"
+    },
+    "./core": {
+      "import": "./dist/custom-views.core.esm.js",
+      "require": "./dist/custom-views.core.cjs.js"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build:types": "tsc --project tsconfig.json",
+    "build:js": "rollup -c",
+    "build": "npm run clean && npm run build:types && npm run build:js",
+    "dev": "rollup -c -w",
+    "test": "vitest"
+  },
+  "keywords": [
+    "javascript",
+    "library",
+    "custom views"
+  ],
+  "author": "Chan Ger Teck",
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@types/node": "^24.3.1",
+    "jsdom": "^27.0.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.46.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.2",
+    "vitest": "^3.2.4"
+  },
+  "bugs": {
+    "url": "https://github.com/customviews-js/customviews/issues"
+  },
+  "homepage": "https://github.com/customviews-js/customviews#readme"
+}