atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/components/rating/rating.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .sr-only {
   position: absolute !important;
   width: 1px !important;
@@ -33,6 +34,8 @@
 .rating-container {
   display: inline-flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
   gap: 12px;
   user-select: none;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -71,19 +74,30 @@
 .rating-items {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 8px;
+  /* Modern browsers: use a grid so every smiley column is exactly equal-width */
+}
+.rating-items:has(.smiley-item-wrapper) {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+  justify-items: center;
+  gap: 4px;
 }
 .rating-rtl .rating-items {
   flex-direction: row-reverse;
 }
 
 .rating-item {
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
+  background: none !important;
+  border: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
   cursor: pointer;
-  outline: none;
+  outline: none !important;
+  box-shadow: none !important;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
@@ -103,9 +117,9 @@
   z-index: 10;
 }
 .rating-item.rating-item-emoji {
-  background: var(--bg-secondary, #f1f5f9);
-  border-radius: 50%;
-  padding: 10px;
+  background: var(--bg-secondary, #f1f5f9) !important;
+  border-radius: 50% !important;
+  padding: 10px !important;
   font-size: 1.5em;
   filter: grayscale(1);
   opacity: 0.5;
@@ -114,14 +128,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
 }
 .rating-item.rating-item-emoji.rating-item-active, .rating-item.rating-item-emoji.rating-item-selected {
   filter: grayscale(0);
   opacity: 1;
-  background: var(--bg-primary, #ffffff);
+  background: var(--bg-primary, #ffffff) !important;
   transform: scale(1.3) !important;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(255, 255, 255, 0.8);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(255, 255, 255, 0.8) !important;
   z-index: 20;
 }
 .rating-item.rating-item-emoji .emoji-display {
@@ -184,8 +198,8 @@
   opacity: 0.4 !important;
   transition: all 0.3s;
   display: block;
-  width: 100%;
-  height: 100%;
+  width: 100% !important;
+  height: 100% !important;
   position: absolute;
   top: 0;
   left: 0;
@@ -217,54 +231,54 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 34px;
-  height: 34px;
+  width: 34px !important;
+  height: 34px !important;
   flex-shrink: 0;
 }
 .rating-size-xxxs .rating-icon-fill ui-icon,
 .rating-size-xxxs .rating-icon-fill img {
-  width: 14px;
-  height: 14px;
+  width: 14px !important;
+  height: 14px !important;
 }
 .rating-size-xxs .rating-icon-fill ui-icon,
 .rating-size-xxs .rating-icon-fill img {
-  width: 18px;
-  height: 18px;
+  width: 18px !important;
+  height: 18px !important;
 }
 .rating-size-xs .rating-icon-fill ui-icon,
 .rating-size-xs .rating-icon-fill img {
-  width: 22px;
-  height: 22px;
+  width: 22px !important;
+  height: 22px !important;
 }
 .rating-size-sm .rating-icon-fill ui-icon,
 .rating-size-sm .rating-icon-fill img {
-  width: 26px;
-  height: 26px;
+  width: 26px !important;
+  height: 26px !important;
 }
 .rating-size-md .rating-icon-fill ui-icon,
 .rating-size-md .rating-icon-fill img {
-  width: 34px;
-  height: 34px;
+  width: 34px !important;
+  height: 34px !important;
 }
 .rating-size-lg .rating-icon-fill ui-icon,
 .rating-size-lg .rating-icon-fill img {
-  width: 44px;
-  height: 44px;
+  width: 44px !important;
+  height: 44px !important;
 }
 .rating-size-xl .rating-icon-fill ui-icon,
 .rating-size-xl .rating-icon-fill img {
-  width: 56px;
-  height: 56px;
+  width: 56px !important;
+  height: 56px !important;
 }
 .rating-size-xxl .rating-icon-fill ui-icon,
 .rating-size-xxl .rating-icon-fill img {
-  width: 72px;
-  height: 72px;
+  width: 72px !important;
+  height: 72px !important;
 }
 .rating-size-xxxl .rating-icon-fill ui-icon,
 .rating-size-xxxl .rating-icon-fill img {
-  width: 96px;
-  height: 96px;
+  width: 96px !important;
+  height: 96px !important;
 }
 .rating-icon-fill img {
   filter: none;
@@ -273,101 +287,173 @@
 }
 
 .rating-item-smiley {
-  background: rgba(var(--text-standard-rgb, 128, 128, 128), 0.08);
-  border: 1px solid rgba(var(--text-standard-rgb, 128, 128, 128), 0.1);
-  border-radius: 50%;
+  background: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  padding: 0 !important;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   cursor: pointer;
+  width: auto !important;
+  height: auto !important;
 }
 .rating-size-xxxs .rating-item-smiley {
-  padding: 4px;
+  padding: 0 !important;
 }
 .rating-size-xxs .rating-item-smiley {
-  padding: 5px;
+  padding: 0 !important;
 }
 .rating-size-xs .rating-item-smiley {
-  padding: 6px;
+  padding: 0 !important;
 }
 .rating-size-sm .rating-item-smiley {
-  padding: 8px;
+  padding: 0 !important;
 }
 .rating-size-md .rating-item-smiley {
-  padding: 10px;
+  padding: 0 !important;
 }
 .rating-size-lg .rating-item-smiley {
-  padding: 12px;
+  padding: 0 !important;
 }
 .rating-size-xl .rating-item-smiley {
-  padding: 16px;
+  padding: 0 !important;
 }
 .rating-size-xxl .rating-item-smiley {
-  padding: 20px;
+  padding: 0 !important;
 }
 .rating-size-xxxl .rating-item-smiley {
-  padding: 24px;
+  padding: 0 !important;
+}
+.rating-item-smiley {
+  /* Override the base .rating-item hover scale — smileys use a gentler lift */
+}
+.rating-item-smiley:hover:not(:disabled) {
+  transform: scale(1.2);
+  z-index: 2;
+  background: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
 }
 .rating-item-smiley.rating-item-active, .rating-item-smiley.rating-item-selected {
-  background: rgba(var(--primary-rgb, 139, 92, 246), 0.15);
-  transform: scale(1.15);
+  background: none !important;
+  transform: scale(1.2);
   color: var(--rating-active-color);
-  box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 139, 92, 246), 0.05), 0 4px 12px rgba(0, 0, 0, 0.05);
+  box-shadow: none !important;
+  border: none !important;
+  outline: none !important;
+  z-index: 5;
 }
 .rating-glass .rating-item-smiley {
-  background: rgba(255, 255, 255, 0.05);
+  background: none !important;
 }
 .rating-glass .rating-item-smiley.rating-item-selected {
-  background: rgba(255, 255, 255, 0.15);
+  background: none !important;
 }
 
 .rating-item-thumb {
-  padding: 10px;
-  background: var(--bg-primary, #f8fafc);
-  border: 1px solid var(--border-subtle, #e2e8f0);
-  border-radius: 12px;
+  padding: 0 !important;
+  background: none !important;
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  outline: none !important;
 }
 .rating-item-thumb.rating-item-active {
-  background: var(--bg-primary, #ffffff);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  border-color: var(--rating-active-color);
+  background: none !important;
+  box-shadow: none !important;
+  border: none !important;
+  outline: none !important;
 }
 .rating-item-thumb.rating-item-thumb-up:hover:not(:disabled) {
   color: var(--rating-success);
-  border-color: var(--rating-success);
+  background: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
 }
 .rating-item-thumb.rating-item-thumb-down:hover:not(:disabled) {
   color: var(--rating-danger);
-  border-color: var(--rating-danger);
+  background: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
 }
 
 .smiley-item-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
+  /* Fixed min-width per size so all icon centers are equidistant regardless of label length */
+  min-width: 52px;
+}
+.rating-size-xxxs .smiley-item-wrapper {
+  min-width: 30px;
+  gap: 4px;
+}
+.rating-size-xxs .smiley-item-wrapper {
+  min-width: 34px;
+  gap: 4px;
+}
+.rating-size-xs .smiley-item-wrapper {
+  min-width: 40px;
+  gap: 4px;
+}
+.rating-size-sm .smiley-item-wrapper {
+  min-width: 46px;
+  gap: 5px;
+}
+.rating-size-md .smiley-item-wrapper {
+  min-width: 52px;
+  gap: 6px;
 }
 .rating-size-lg .smiley-item-wrapper {
-  gap: 12px;
+  min-width: 70px;
+  gap: 8px;
 }
 .rating-size-xl .smiley-item-wrapper {
-  gap: 16px;
+  min-width: 84px;
+  gap: 10px;
+}
+.rating-size-xxl .smiley-item-wrapper {
+  min-width: 100px;
+  gap: 12px;
+}
+.rating-size-xxxl .smiley-item-wrapper {
+  min-width: 118px;
+  gap: 14px;
 }
 
 .smiley-label {
   font-size: 11px;
-  font-weight: 700;
-  color: var(--rating-active-color, var(--color-success, #10b981));
+  font-weight: 600;
+  color: var(--text-secondary, #94a3b8); /* muted by default */
   text-transform: capitalize;
   letter-spacing: -0.2px;
   white-space: nowrap;
+  text-align: center;
+  width: 100%;
+  opacity: 0.55;
+  transition: color 0.2s ease, opacity 0.2s ease, font-weight 0.2s ease;
+  /* Brighten label only for the hovered or selected smiley (sibling selector) */
+}
+.rating-item-smiley.rating-item-active ~ .smiley-label, .rating-item-smiley.rating-item-selected ~ .smiley-label, .rating-item-smiley.rating-item-hover ~ .smiley-label {
+  color: var(--rating-active-color, var(--color-success, #10b981));
+  opacity: 1;
+  font-weight: 700;
 }
 .rating-size-lg .smiley-label {
-  font-size: 13px;
+  font-size: 12px;
 }
 .rating-size-xl .smiley-label {
+  font-size: 14px;
+}
+.rating-size-xxl .smiley-label {
   font-size: 15px;
 }
 

package/dist/collection/components/rating/rating.js

@@ -122,24 +122,28 @@ export class Rating {
         }
         return [];
     }
-    handleClick = (rating) => {
+    handleClick = (rating, event) => {
         if (this.readonly || this.disabled)
             return;
+        let effectiveRating = rating;
+        if (this.allowHalf && event) {
+            const rect = event.currentTarget.getBoundingClientRect();
+            effectiveRating = (event.clientX - rect.left) < rect.width / 2 ? rating - 0.5 : rating;
+        }
         if (this.type === 'thumb') {
-            // Thumb: toggle between 1 (up), -1 (down), 0 (none)
-            if (this.value === rating) {
+            if (this.value === effectiveRating) {
                 this.value = 0;
             }
             else {
-                this.value = rating;
+                this.value = effectiveRating;
             }
         }
         else {
-            if (this.clearable && this.value === rating) {
+            if (this.clearable && this.value === effectiveRating) {
                 this.value = 0;
             }
             else {
-                this.value = rating;
+                this.value = effectiveRating;
             }
         }
         if (this.haptic && 'vibrate' in navigator) {
@@ -208,10 +212,24 @@ export class Rating {
             this.particles = [];
         }, 1500);
     };
-    handleMouseEnter = (rating) => {
+    handleMouseEnter = (rating, event) => {
         if (this.readonly || this.disabled)
             return;
-        this.hoverValue = rating;
+        if (this.allowHalf && event) {
+            const rect = event.currentTarget.getBoundingClientRect();
+            this.hoverValue = (event.clientX - rect.left) < rect.width / 2 ? rating - 0.5 : rating;
+        }
+        else {
+            this.hoverValue = rating;
+        }
+    };
+    handleMouseMove = (rating, event) => {
+        if (this.readonly || this.disabled || !this.allowHalf)
+            return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const next = (event.clientX - rect.left) < rect.width / 2 ? rating - 0.5 : rating;
+        if (this.hoverValue !== next)
+            this.hoverValue = next;
     };
     handleMouseLeave = () => {
         if (this.readonly || this.disabled)
@@ -234,7 +252,7 @@ export class Rating {
                     'rating-item-half': isHalf,
                     'rating-item-hover': isHovered,
                     [`rating-color-${itemColor}`]: !!itemColor,
-                }, onClick: () => this.handleClick(i), onMouseEnter: () => this.handleMouseEnter(i), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": `Rate ${i} out of ${this.max}` }, h("div", { class: "rating-icon-container" }, this.image ? (h("img", { src: this.image, class: "rating-icon-bg", alt: "rating" })) : (h("ui-icon", { name: this.iconName, color: "currentColor", library: this.iconLibrary, size: this.size, class: "rating-icon-bg" })), h("div", { class: "rating-icon-fill", style: { width: isHalf ? '50%' : (isActive ? '100% ' : '0%') } }, this.image ? (h("img", { src: this.image, alt: "rating active" })) : (h("ui-icon", { name: this.iconName, color: "currentColor", library: this.iconLibrary, size: this.size, fill: activeFill }))))));
+                }, onClick: (e) => this.handleClick(i, e), onMouseEnter: (e) => this.handleMouseEnter(i, e), onMouseMove: (e) => this.handleMouseMove(i, e), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": `Rate ${i} out of ${this.max}` }, h("div", { class: "rating-icon-container" }, this.image ? (h("img", { src: this.image, class: "rating-icon-bg", alt: "rating" })) : (h("ui-icon", { name: this.iconName, color: "currentColor", library: this.iconLibrary, size: this.size, class: "rating-icon-bg" })), h("div", { class: "rating-icon-fill", style: { width: isHalf ? '50%' : (isActive ? '100% ' : '0%') } }, this.image ? (h("img", { src: this.image, alt: "rating active" })) : (h("ui-icon", { name: this.iconName, color: "currentColor", library: this.iconLibrary, size: this.size, fill: activeFill }))))));
         }
         return items;
     }
@@ -289,13 +307,13 @@ export class Rating {
                     'rating-item-thumb': true,
                     'rating-item-active': thumbUpActive,
                     'rating-item-thumb-up': true,
-                }, onClick: () => this.handleClick(1), onMouseEnter: () => this.handleMouseEnter(1), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": "Thumbs up" }, h("div", { class: "rating-icon-container" }, h("ui-icon", { name: "thumbs-up", color: "currentColor", library: "lucide", class: "rating-icon-bg" }), h("div", { class: "rating-icon-fill", style: { width: thumbUpActive ? '100%' : '0%' } }, h("ui-icon", { name: "thumbs-up", color: "currentColor", library: "lucide" })))),
+                }, onClick: () => this.handleClick(1), onMouseEnter: () => this.handleMouseEnter(1), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": "Thumbs up" }, h("div", { class: "rating-icon-container" }, h("ui-icon", { name: "thumbs-up", color: "currentColor", library: "lucide", size: this.size, class: "rating-icon-bg" }), h("div", { class: "rating-icon-fill", style: { width: thumbUpActive ? '100%' : '0%' } }, h("ui-icon", { name: "thumbs-up", color: "currentColor", library: "lucide", size: this.size })))),
             h("button", { type: "button", class: {
                     'rating-item': true,
                     'rating-item-thumb': true,
                     'rating-item-active': thumbDownActive,
                     'rating-item-thumb-down': true,
-                }, onClick: () => this.handleClick(-1), onMouseEnter: () => this.handleMouseEnter(-1), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": "Thumbs down" }, h("div", { class: "rating-icon-container" }, h("ui-icon", { name: "thumbs-down", library: "lucide", class: "rating-icon-bg" }), h("div", { class: "rating-icon-fill", style: { width: thumbDownActive ? '100%' : '0%' } }, h("ui-icon", { name: "thumbs-down", library: "lucide" })))),
+                }, onClick: () => this.handleClick(-1), onMouseEnter: () => this.handleMouseEnter(-1), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": "Thumbs down" }, h("div", { class: "rating-icon-container" }, h("ui-icon", { name: "thumbs-down", library: "lucide", size: this.size, class: "rating-icon-bg" }), h("div", { class: "rating-icon-fill", style: { width: thumbDownActive ? '100%' : '0%' } }, h("ui-icon", { name: "thumbs-down", library: "lucide", size: this.size })))),
         ];
     }
     render() {
@@ -315,14 +333,14 @@ export class Rating {
         const currentLabel = this.type === 'thumb'
             ? (this.value === 1 ? 'Liked' : this.value === -1 ? 'Disliked' : '')
             : labels[(this.hoverValue || this.value) - 1];
-        const descriptionElement = this.description && (h("div", { key: 'ddad90f4a42a3c07145f31156cdc6495f33b0bee', class: `rating-description rating-description-${this.descriptionPosition}` }, this.description));
+        const descriptionElement = this.description && (h("div", { key: '89ffcb9eb6ff980caf55a0663e2a70699e15fd2c', class: `rating-description rating-description-${this.descriptionPosition}` }, this.description));
         const helperElement = (this.invalid && this.errorMessage) ? (h("div", { class: "rating-helper rating-error" }, h("ui-icon", { name: "alert-circle", library: "lucide", size: "12px" }), h("span", null, this.errorMessage))) : this.helperText ? (h("div", { class: "rating-helper" }, this.helperText)) : null;
         const dynamicStyle = {
             '--rating-active-color': this.activeColor || `var(--rating-${this.color})`,
             '--rating-fill-color': this.activeFillColor || 'currentColor',
         };
         const summaryElement = (this.showSummary && currentLabel) ? (h("div", { class: `rating-summary rating-summary-${this.summaryPosition}` }, h("div", { class: "summary-divider" }), h("div", { class: "summary-content" }, h("p", { class: "summary-label" }, currentLabel), h("p", { class: "summary-value" }, (this.hoverValue || this.value).toFixed(0), " / ", this.max)))) : null;
-        return (h("div", { key: '09946cb1ba974009053c5cdf39a92c904f485cc7', class: classes, style: dynamicStyle, tabindex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, role: "group", "aria-label": "Rating component" }, h("div", { key: '8c56d47b79ddd22a69fd58dee44f13182ebabc3f', class: "rating-items-container" }, h("div", { key: '6c9206ec1dc844689631a32799dd368bef1160b0', class: "rating-items" }, this.type === 'star' && this.renderStarRating(), this.type === 'smiley' && this.renderSmileyRating(), this.type === 'thumb' && this.renderThumbRating(), this.descriptionPosition === 'side' && descriptionElement), this.summaryPosition === 'side' && summaryElement), this.showValue && !this.showSummary && this.type !== 'thumb' && (h("div", { key: '2b733f67e6c01f31e789b79ea1f652a63edcde39', class: "rating-value" }, currentLabel && h("span", { key: 'd5ca42772c409783b2ef5dea7da47944df87eec9', class: "rating-label" }, currentLabel), h("span", { key: '860c841ed2d7b2e642ad132d91bcd731e1a974c2', class: "rating-number" }, (this.hoverValue || this.value).toFixed(this.allowHalf ? 1 : 0), " / ", this.max))), this.showReviews && this.totalReviews > 0 && (h("div", { key: 'd3f05521d7337580d120356ce44cc149211fe28f', class: "rating-total-reviews" }, h("span", { key: '4f3c9863f74bb3e2a5f2d46cb94bef7e053471a1', class: "review-dot" }, "\u2022"), h("span", { key: '9eb1794ad9f571667afd26857719bc38c68f5dbf', class: "review-count" }, "(", this.totalReviews, " reviews)"))), this.descriptionPosition === 'bottom' && descriptionElement, this.summaryPosition === 'bottom' && summaryElement, this.showHistogram && this.renderHistogram(), helperElement, this.particles.map(p => (h("div", { key: p.id, class: "rating-victory-particle", style: {
+        return (h("div", { key: '70e8a2549d236825559aff795abfe0238f47e761', class: classes, style: dynamicStyle, tabindex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, role: "group", "aria-label": "Rating component" }, h("div", { key: '98fcc1a5aa1ca18db16541257d3787b9efd84118', class: "rating-items-container" }, h("div", { key: 'e43ca0715fc16c29d45260d4afda67111db5333c', class: "rating-items" }, this.type === 'star' && this.renderStarRating(), this.type === 'smiley' && this.renderSmileyRating(), this.type === 'thumb' && this.renderThumbRating(), this.descriptionPosition === 'side' && descriptionElement), this.summaryPosition === 'side' && summaryElement), this.showValue && !this.showSummary && this.type !== 'thumb' && (h("div", { key: 'ed9c47ff5e17d3a6922bf4fa82f92770906d525c', class: "rating-value" }, currentLabel && h("span", { key: 'b2f03c3e6a02b0f95ef64c29b91b3bb58929bef8', class: "rating-label" }, currentLabel), h("span", { key: '7c84b5ac8489269655807fe6ac8b76e3e4d72a86', class: "rating-number" }, (this.hoverValue || this.value).toFixed(this.allowHalf ? 1 : 0), " / ", this.max))), this.showReviews && this.totalReviews > 0 && (h("div", { key: '50ddb5ffd3f21e4fdc89dad4499517c36fcccc38', class: "rating-total-reviews" }, h("span", { key: '1cda24daf1daba68f08347b0b0c89510a5ac5622', class: "review-dot" }, "\u2022"), h("span", { key: 'e05517a82ba1507bfbdad8c7a2d75633bcf8d791', class: "review-count" }, "(", this.totalReviews, " reviews)"))), this.descriptionPosition === 'bottom' && descriptionElement, this.summaryPosition === 'bottom' && summaryElement, this.showHistogram && this.renderHistogram(), helperElement, this.particles.map(p => (h("div", { key: p.id, class: "rating-victory-particle", style: {
                 '--tx': `${p.tx}px`,
                 '--ty': `${p.ty}px`,
                 '--rot': `${p.rot}deg`,

package/dist/collection/components/resizable-panel/resizable-panel.js

@@ -439,7 +439,7 @@ export class AppResizablePanel {
             'resizable-dragging': this.isDragging,
             'resizable-animated': this.animated && !this.isDragging,
         };
-        return (h(Host, { key: '222dabdb3f919a430a8dc35008607dd9ad21f670' }, h("div", { key: '6fab04ac24283a3dc1be30ca97488639021e0c13', class: containerClasses, ref: el => this.containerRef = el }, this.internalPanels.map((panel, index) => (h("div", { key: panel.id, class: "panel-wrapper", style: {
+        return (h(Host, { key: '1ebae1fcef3bd4d4dfcc670b1694f07051d3ed4e' }, h("div", { key: '3f2f1b985733cabca8b297a12136c53af6943b36', class: containerClasses, ref: el => this.containerRef = el }, this.internalPanels.map((panel, index) => (h("div", { key: panel.id, class: "panel-wrapper", style: {
                 [this.direction === 'horizontal' ? 'width' : 'height']: panel.collapsed ? `${this.handleSize}px` : `${panel.size}%`,
             } }, h("div", { class: {
                 'resizable-panel': true,