From abb03df0cdf10d4e29f6b1de9feeaf61987b9d32 Mon Sep 17 00:00:00 2001 From: Frank Pizzella Date: Thu, 6 Nov 2025 10:40:26 -0500 Subject: [PATCH 1/8] feat: static css styling inserted --- README.md | 17 +++++++++++++---- index.html | 18 ++++++++++++------ src/index.ts | 15 +++++---------- src/mixin.ts | 6 ------ 4 files changed, 30 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 09b48ff..a9e0770 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ Directly from unpkg.com }; - + ``` @@ -54,7 +54,7 @@ To do that you have to pass the attribute `context="true"` to the `topsort-banne use `topsort-banner-slot` as children elements. ```html - + @@ -65,8 +65,6 @@ use `topsort-banner-slot` as children elements. | Name | Type | Description | | ---------------------- | ---------------- | --------------------------------------------------------------------------- | -| width | Number | Banner width | -| height | Number | Banner height | | id | String | The slot ID for this banner | | category-id* | Optional String | The category ID of the current page | | category-ids* | Optional String | Comma (,) separated list of category IDs, the item must match all | @@ -79,6 +77,17 @@ use `topsort-banner-slot` as children elements. \* Only one of `[category-id, category-ids, category-disjunctions]` must be set. If multiple are set, only the first will be considered, in that order. +# Styling + +The component will inherit all styles from its parent elements, but you add +custom styling to the banner itself. +To add custom styling to the banner, you can use the following CSS variables: + +- `--ts-banner-width`: The width of the banner. Defaults to `100%`. +- `--ts-banner-height`: The height of the banner. Defaults to `100%`. +- `--ts-banner-padding`: The padding of the banner. Defaults to `0`. +- `--ts-banner-margin`: The margin of the banner. Defaults to `0`. + # Banner Slot Attributes | Name | Type | Description | |------|--------|-----------------------------------------------------------------------------------------------------------------------| diff --git a/index.html b/index.html index 50ac9c7..0f6b2d1 100644 --- a/index.html +++ b/index.html @@ -43,24 +43,30 @@ justify-content: center; padding: 20px; } + topsort-banner { + --ts-banner-width: 200px; + --ts-banner-height: 50%; + --ts-banner-padding: 10px; + --ts-banner-margin: 10px; + }

Standalone Banner

         
-          <topsort-banner id="an-example-slot" width="800" height="400"></topsort-banner>
+          <topsort-banner id="an-example-slot"></topsort-banner>
-
- +
+
-
+

Multiple Banners under one context

         
-          <topsort-banner id="an-example-slot" width="800" height="400" context>
+          <topsort-banner id="an-example-slot" context>
             <div>
               <h3>First Banner</h3>
               <pre>
@@ -77,7 +83,7 @@ 
Multiple Banners under one context

           </topsort-banner>
- +

First Banner

diff --git a/src/index.ts b/src/index.ts index 4d1457e..0110b15 100644 --- a/src/index.ts +++ b/src/index.ts @@ -73,9 +73,7 @@ function getNoWinnersElement(): TemplateResult { function getBannerElement( banner: Banner, - width: number, - height: number, - newTab: boolean, + newTab: boolean ): TemplateResult { if (window.TS_BANNERS.getBannerElement) { const element = window.TS_BANNERS.getBannerElement(banner); @@ -106,15 +104,14 @@ function getBannerElement( ? html` ` : html` Topsort banner `; @@ -126,7 +123,7 @@ function getBannerElement(
${wrappedMedia}
@@ -203,7 +200,7 @@ export class TopsortBanner extends BannerComponent(LitElement) { if (!banners.length) { return getNoWinnersElement(); } - return getBannerElement(banners[0], this.width, this.height, this.newTab); + return getBannerElement(banners[0], this.newTab); }, error: (error) => getErrorElement(error), }); @@ -263,8 +260,6 @@ export class TopsortBannerSlot extends LitElement { } return getBannerElement( this.context.banners[this.rank - 1], - this.context.width, - this.context.height, this.context.newTab, ); } diff --git a/src/mixin.ts b/src/mixin.ts index 6c9f619..18b63a3 100644 --- a/src/mixin.ts +++ b/src/mixin.ts @@ -23,12 +23,6 @@ export declare class BannerComponentInterface { export const BannerComponent = >(Base: T) => { class BannerComponent extends Base { - @property({ type: Number }) - readonly width: number = 0; - - @property({ type: Number }) - readonly height: number = 0; - @property({ attribute: "id", type: String }) readonly slotId: string = ""; From 4b1a1775af3c95cc9b4ec806fb4c7781516b7699 Mon Sep 17 00:00:00 2001 From: Frank Pizzella Date: Thu, 6 Nov 2025 10:46:09 -0500 Subject: [PATCH 2/8] feat: fixed biome errors --- src/index.ts | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/index.ts b/src/index.ts index 0110b15..7109b87 100644 --- a/src/index.ts +++ b/src/index.ts @@ -71,10 +71,7 @@ function getNoWinnersElement(): TemplateResult { return html``; } -function getBannerElement( - banner: Banner, - newTab: boolean -): TemplateResult { +function getBannerElement(banner: Banner, newTab: boolean): TemplateResult { if (window.TS_BANNERS.getBannerElement) { const element = window.TS_BANNERS.getBannerElement(banner); return html`${element}`; @@ -258,10 +255,7 @@ export class TopsortBannerSlot extends LitElement { if (!this.context.banners.length || this.context.banners.length < this.rank) { return getNoWinnersElement(); } - return getBannerElement( - this.context.banners[this.rank - 1], - this.context.newTab, - ); + return getBannerElement(this.context.banners[this.rank - 1], this.context.newTab); } // avoid shadow dom since we cannot attach to events via analytics.js From c5512260bbe19596d5d0a32a91410b2a8b71e026 Mon Sep 17 00:00:00 2001 From: Frank Pizzella Date: Thu, 6 Nov 2025 16:33:35 -0500 Subject: [PATCH 3/8] feat: ensured width and height attributes are unchanged --- README.md | 6 ++++-- index.html | 6 +++--- src/index.ts | 32 ++++++++++++++++++++------------ src/mixin.ts | 6 ++++++ 4 files changed, 33 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index a9e0770..d603d3c 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ Directly from unpkg.com }; - + ``` @@ -54,7 +54,7 @@ To do that you have to pass the attribute `context="true"` to the `topsort-banne use `topsort-banner-slot` as children elements. ```html - + @@ -65,6 +65,8 @@ use `topsort-banner-slot` as children elements. | Name | Type | Description | | ---------------------- | ---------------- | --------------------------------------------------------------------------- | +| width | Number | Banner width | +| height | Number | Banner height | | id | String | The slot ID for this banner | | category-id* | Optional String | The category ID of the current page | | category-ids* | Optional String | Comma (,) separated list of category IDs, the item must match all | diff --git a/index.html b/index.html index 0f6b2d1..896a0cb 100644 --- a/index.html +++ b/index.html @@ -55,11 +55,11 @@

Standalone Banner

         
-          <topsort-banner id="an-example-slot"></topsort-banner>
+          <topsort-banner id="an-example-slot" width="800" height="400"></topsort-banner>
- +
@@ -83,7 +83,7 @@

Multiple Banners under one context

</topsort-banner> - +

First Banner

diff --git a/src/index.ts b/src/index.ts index 7109b87..9f7a785 100644 --- a/src/index.ts +++ b/src/index.ts @@ -71,7 +71,12 @@ function getNoWinnersElement(): TemplateResult { return html``; } -function getBannerElement(banner: Banner, newTab: boolean): TemplateResult { +function getBannerElement( + banner: Banner, + newTab: boolean, + width?: number, + height?: number, +): TemplateResult { if (window.TS_BANNERS.getBannerElement) { const element = window.TS_BANNERS.getBannerElement(banner); return html`${element}`; @@ -97,18 +102,20 @@ function getBannerElement(banner: Banner, newTab: boolean): TemplateResult { return false; } })(); + const resolvedWidth = width ? `${width}px` : "100%"; + const resolvedHeight = height ? `${height}px` : "100%"; const media = isVideo ? html` ` : html` Topsort banner `; @@ -120,7 +127,7 @@ function getBannerElement(banner: Banner, newTab: boolean): TemplateResult {
${wrappedMedia}
@@ -197,7 +204,7 @@ export class TopsortBanner extends BannerComponent(LitElement) { if (!banners.length) { return getNoWinnersElement(); } - return getBannerElement(banners[0], this.newTab); + return getBannerElement(banners[0], this.newTab, this.width, this.height); }, error: (error) => getErrorElement(error), }); @@ -255,7 +262,12 @@ export class TopsortBannerSlot extends LitElement { if (!this.context.banners.length || this.context.banners.length < this.rank) { return getNoWinnersElement(); } - return getBannerElement(this.context.banners[this.rank - 1], this.context.newTab); + return getBannerElement( + this.context.banners[this.rank - 1], + this.context.newTab, + this.context.width, + this.context.height, + ); } // avoid shadow dom since we cannot attach to events via analytics.js @@ -267,8 +279,7 @@ export class TopsortBannerSlot extends LitElement { @customElement("hls-video") export class HlsVideo extends LitElement { @property({ type: String }) src = ""; // HLS manifest URL - @property({ type: String }) width = "800px"; - @property({ type: String }) height = "400px"; + @property({ type: String }) styles = ""; private get videoId() { try { @@ -286,6 +297,7 @@ export class HlsVideo extends LitElement { autoplay loop playsinline + style=${this.styles}" > `; } @@ -294,10 +306,6 @@ export class HlsVideo extends LitElement { const video = this.shadowRoot?.getElementById(this.videoId) as HTMLVideoElement; if (!video) return; - video.style.width = this.width; - video.style.height = this.height; - video.style.objectFit = "cover"; - let Hls: HlsConstructor; try { Hls = await hlsDependency.load(); diff --git a/src/mixin.ts b/src/mixin.ts index 18b63a3..6c9f619 100644 --- a/src/mixin.ts +++ b/src/mixin.ts @@ -23,6 +23,12 @@ export declare class BannerComponentInterface { export const BannerComponent = >(Base: T) => { class BannerComponent extends Base { + @property({ type: Number }) + readonly width: number = 0; + + @property({ type: Number }) + readonly height: number = 0; + @property({ attribute: "id", type: String }) readonly slotId: string = ""; From 8d56ad07547aca96e095438747236036c5a5c359 Mon Sep 17 00:00:00 2001 From: Frank Pizzella Date: Thu, 6 Nov 2025 16:39:27 -0500 Subject: [PATCH 4/8] feat: fixed documentation --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 896a0cb..dc91b6e 100644 --- a/index.html +++ b/index.html @@ -66,7 +66,7 @@

Standalone Banner

Multiple Banners under one context

         
-          <topsort-banner id="an-example-slot" context>
+          <topsort-banner id="an-example-slot" width="800" height="400" context>
             <div>
               <h3>First Banner</h3>
               <pre>

From c738037af6d1f21940108175ee866c061a658e52 Mon Sep 17 00:00:00 2001
From: Guilherme Pimenta 
Date: Fri, 14 Nov 2025 14:51:46 -0300
Subject: [PATCH 5/8] custom class

---
 README.md    | 59 +++++++++++++++++++++++++++++++++++++++++++++-------
 index.html   | 13 +++++++-----
 src/index.ts | 46 +++++++++++++++++++++++++++++++++-------
 src/mixin.ts |  4 ++++
 src/types.ts |  1 +
 5 files changed, 103 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index d603d3c..a41421b 100644
--- a/README.md
+++ b/README.md
@@ -75,20 +75,65 @@ use `topsort-banner-slot` as children elements.
 | location               | Optional String  | The location for geotargeting                                               |
 | new-tab                | Optional Boolean | Opens the banner's link in a new tab (defaults to false)                    |
 | context                | Optional Boolean | Uses the element as a context provider to render multiple banners           |
+| class                  | Optional String  | Custom CSS class to apply to the banner container                            |
 
 \* Only one of `[category-id, category-ids, category-disjunctions]` must be set.
 If multiple are set, only the first will be considered, in that order.
 
 # Styling
 
-The component will inherit all styles from its parent elements, but you add
-custom styling to the banner itself.
-To add custom styling to the banner, you can use the following CSS variables:
+The banner component is designed to integrate seamlessly with your existing CSS system.
+Each banner is rendered inside a container div with the class `ts-banner`,
+making it easy to target with CSS selectors.
 
-- `--ts-banner-width`: The width of the banner. Defaults to `100%`.
-- `--ts-banner-height`: The height of the banner. Defaults to `100%`.
-- `--ts-banner-padding`: The padding of the banner. Defaults to `0`.
-- `--ts-banner-margin`: The margin of the banner. Defaults to `0`.
+## CSS Targeting
+
+You can style banners using standard CSS selectors:
+
+```css
+/* Target all banner containers */
+.ts-banner {
+  padding: 10px;
+  margin: 10px;
+  border: 1px solid #ccc;
+}
+
+/* Target banners with specific dimensions */
+.ts-banner[data-ts-width="800"] {
+  max-width: 800px;
+}
+```
+
+## Custom CSS Classes
+
+You can pass custom CSS classes to the banner component using the `class` attribute:
+
+```html
+
+```
+
+The custom class will be applied alongside the `ts-banner` class, allowing you to
+integrate the banner into your existing CSS system.
+
+## Retrieving Width and Height
+
+The width and height values are easily accessible via:
+
+- **Data attributes**: `data-ts-width` and `data-ts-height` on the container element
+- **CSS custom properties**: `--ts-banner-width` and `--ts-banner-height` on the container element
+
+```css
+/* Use data attributes in CSS */
+.ts-banner[data-ts-width] {
+  /* Styles for banners with width set */
+}
+
+/* Use CSS custom properties */
+.ts-banner {
+  width: var(--ts-banner-width, 100%);
+  height: var(--ts-banner-height, auto);
+}
+```
 
 # Banner Slot Attributes
 | Name | Type   | Description                                                                                                           |
diff --git a/index.html b/index.html
index dc91b6e..44f88f9 100644
--- a/index.html
+++ b/index.html
@@ -43,11 +43,14 @@
       justify-content: center;
       padding: 20px;
     }
-    topsort-banner {
-      --ts-banner-width: 200px;
-      --ts-banner-height: 50%;
-      --ts-banner-padding: 10px;
-      --ts-banner-margin: 10px;
+    /* Example: Style all banner containers */
+    .ts-banner {
+      padding: 10px;
+      margin: 10px;
+    }
+    /* Example: Target banners with specific width */
+    .ts-banner[data-ts-width="800"] {
+      border: 1px solid #ddd;
     }
   
   
diff --git a/src/index.ts b/src/index.ts
index 9f7a785..ce02bde 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -76,6 +76,7 @@ function getBannerElement(
   newTab: boolean,
   width?: number,
   height?: number,
+  className?: string,
 ): TemplateResult {
   if (window.TS_BANNERS.getBannerElement) {
     const element = window.TS_BANNERS.getBannerElement(banner);
@@ -102,20 +103,41 @@ function getBannerElement(
       return false;
     }
   })();
-  const resolvedWidth = width ? `${width}px` : "100%";
-  const resolvedHeight = height ? `${height}px` : "100%";
+
+  // Build class string: use existing ts-banner class, plus any custom class
+  const containerClass = className ? `ts-banner ${className}` : "ts-banner";
+
+  // Build style string with CSS custom properties for width/height (easily retrievable)
+  const containerStyle = [
+    "display: block",
+    width ? `--ts-banner-width: ${width}px` : "",
+    height ? `--ts-banner-height: ${height}px` : "",
+  ]
+    .filter(Boolean)
+    .join("; ");
+
+  // Media element styles - minimal, let CSS cascade
+  const mediaStyle =
+    width && height
+      ? `width: ${width}px; height: ${height}px; object-fit: cover;`
+      : width
+        ? `width: ${width}px; height: auto; object-fit: cover;`
+        : height
+          ? `width: 100%; height: ${height}px; object-fit: cover;`
+          : "width: 100%; height: auto; object-fit: cover;";
+
   const media = isVideo
     ? html`
         
       `
     : html`
         Topsort banner
       `;
 
@@ -125,9 +147,12 @@ function getBannerElement(
     : html`${media}`;
   return html`
     

       ${wrappedMedia}
     

@@ -146,6 +171,7 @@ const bannerContextHasChanged = (newVal: BannerContext, oldVal?: BannerContext)
     newVal.width !== oldVal.width ||
     newVal.height !== oldVal.height ||
     newVal.newTab !== oldVal.newTab ||
+    newVal.className !== oldVal.className ||
     !!newVal.error !== !!oldVal.error ||
     newVal.banners?.length !== oldVal.banners?.length
   );
@@ -182,6 +208,7 @@ export class TopsortBanner extends BannerComponent(LitElement) {
     width: this.width,
     height: this.height,
     newTab: this.newTab,
+    className: this.className,
   };
 
   @property({ type: Boolean, attribute: "context" })
@@ -204,7 +231,7 @@ export class TopsortBanner extends BannerComponent(LitElement) {
         if (!banners.length) {
           return getNoWinnersElement();
         }
-        return getBannerElement(banners[0], this.newTab, this.width, this.height);
+        return getBannerElement(banners[0], this.newTab, this.width, this.height, this.className);
       },
       error: (error) => getErrorElement(error),
     });
@@ -222,13 +249,15 @@ export class TopsortBanner extends BannerComponent(LitElement) {
     if (
       changedProperties.has("width") ||
       changedProperties.has("height") ||
-      changedProperties.has("newTab")
+      changedProperties.has("newTab") ||
+      changedProperties.has("className")
     ) {
       Promise.resolve().then(() => {
         this.context = {
           width: this.width,
           height: this.height,
           newTab: this.newTab,
+          className: this.className,
         };
       });
     }
@@ -267,6 +296,7 @@ export class TopsortBannerSlot extends LitElement {
       this.context.newTab,
       this.context.width,
       this.context.height,
+      this.context.className,
     );
   }
 
@@ -297,7 +327,7 @@ export class HlsVideo extends LitElement {
         autoplay
         loop
         playsinline
-        style=${this.styles}"
+        style=${this.styles}
       >
     `;
   }
diff --git a/src/mixin.ts b/src/mixin.ts
index 6c9f619..699dcc9 100644
--- a/src/mixin.ts
+++ b/src/mixin.ts
@@ -16,6 +16,7 @@ export declare class BannerComponentInterface {
   searchQuery?: string;
   location?: string;
   newTab: boolean;
+  className?: string;
 
   emitEvent(status: string): void;
   buildAuction(slots: number): Auction;
@@ -50,6 +51,9 @@ export const BannerComponent = >(Base: T) => {
     @property({ attribute: "new-tab", type: Boolean })
     readonly newTab: boolean = false;
 
+    @property({ attribute: "class", type: String })
+    readonly className?: string;
+
     buildAuction(slots: number): Auction {
       const device = getDeviceType();
       const auction: Auction = {
diff --git a/src/types.ts b/src/types.ts
index 709edfa..f5ae531 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -26,6 +26,7 @@ export interface BannerContext {
   width: number;
   height: number;
   newTab: boolean;
+  className?: string;
   banners?: Banner[];
   error?: unknown;
 }

From 15d8c2fb6af071bf49fb21806488c542a0951519 Mon Sep 17 00:00:00 2001
From: Guilherme Pimenta 
Date: Fri, 14 Nov 2025 14:56:17 -0300
Subject: [PATCH 6/8] reolved name clash

---
 src/index.ts | 42 +++++++++++++++++++++---------------------
 src/mixin.ts |  4 ++--
 src/types.ts |  2 +-
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index ce02bde..3c7b9d2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -76,7 +76,7 @@ function getBannerElement(
   newTab: boolean,
   width?: number,
   height?: number,
-  className?: string,
+  bannerClass?: string,
 ): TemplateResult {
   if (window.TS_BANNERS.getBannerElement) {
     const element = window.TS_BANNERS.getBannerElement(banner);
@@ -105,7 +105,7 @@ function getBannerElement(
   })();
 
   // Build class string: use existing ts-banner class, plus any custom class
-  const containerClass = className ? `ts-banner ${className}` : "ts-banner";
+  const containerClass = bannerClass ? `ts-banner ${bannerClass}` : "ts-banner";
 
   // Build style string with CSS custom properties for width/height (easily retrievable)
   const containerStyle = [
@@ -171,7 +171,7 @@ const bannerContextHasChanged = (newVal: BannerContext, oldVal?: BannerContext)
     newVal.width !== oldVal.width ||
     newVal.height !== oldVal.height ||
     newVal.newTab !== oldVal.newTab ||
-    newVal.className !== oldVal.className ||
+    newVal.bannerClass !== oldVal.bannerClass ||
     !!newVal.error !== !!oldVal.error ||
     newVal.banners?.length !== oldVal.banners?.length
   );
@@ -208,7 +208,7 @@ export class TopsortBanner extends BannerComponent(LitElement) {
     width: this.width,
     height: this.height,
     newTab: this.newTab,
-    className: this.className,
+    bannerClass: this.bannerClass,
   };
 
   @property({ type: Boolean, attribute: "context" })
@@ -231,7 +231,7 @@ export class TopsortBanner extends BannerComponent(LitElement) {
         if (!banners.length) {
           return getNoWinnersElement();
         }
-        return getBannerElement(banners[0], this.newTab, this.width, this.height, this.className);
+        return getBannerElement(banners[0], this.newTab, this.width, this.height, this.bannerClass);
       },
       error: (error) => getErrorElement(error),
     });
@@ -246,21 +246,21 @@ export class TopsortBanner extends BannerComponent(LitElement) {
       });
     }
 
-    if (
-      changedProperties.has("width") ||
-      changedProperties.has("height") ||
-      changedProperties.has("newTab") ||
-      changedProperties.has("className")
-    ) {
-      Promise.resolve().then(() => {
-        this.context = {
-          width: this.width,
-          height: this.height,
-          newTab: this.newTab,
-          className: this.className,
-        };
-      });
-    }
+     if (
+       changedProperties.has("width") ||
+       changedProperties.has("height") ||
+       changedProperties.has("newTab") ||
+       changedProperties.has("bannerClass")
+     ) {
+       Promise.resolve().then(() => {
+         this.context = {
+           width: this.width,
+           height: this.height,
+           newTab: this.newTab,
+           bannerClass: this.bannerClass,
+         };
+       });
+     }
   }
 
   // avoid shadow dom since we cannot attach to events via analytics.js
@@ -296,7 +296,7 @@ export class TopsortBannerSlot extends LitElement {
       this.context.newTab,
       this.context.width,
       this.context.height,
-      this.context.className,
+      this.context.bannerClass,
     );
   }
 
diff --git a/src/mixin.ts b/src/mixin.ts
index 699dcc9..6ee9e37 100644
--- a/src/mixin.ts
+++ b/src/mixin.ts
@@ -16,7 +16,7 @@ export declare class BannerComponentInterface {
   searchQuery?: string;
   location?: string;
   newTab: boolean;
-  className?: string;
+  bannerClass?: string;
 
   emitEvent(status: string): void;
   buildAuction(slots: number): Auction;
@@ -52,7 +52,7 @@ export const BannerComponent = >(Base: T) => {
     readonly newTab: boolean = false;
 
     @property({ attribute: "class", type: String })
-    readonly className?: string;
+    readonly bannerClass?: string;
 
     buildAuction(slots: number): Auction {
       const device = getDeviceType();
diff --git a/src/types.ts b/src/types.ts
index f5ae531..6ff618b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -26,7 +26,7 @@ export interface BannerContext {
   width: number;
   height: number;
   newTab: boolean;
-  className?: string;
+  bannerClass?: string;
   banners?: Banner[];
   error?: unknown;
 }

From 715a14bb3acb49468df23ffa9541297ba83f1114 Mon Sep 17 00:00:00 2001
From: Guilherme Pimenta 
Date: Fri, 14 Nov 2025 15:00:36 -0300
Subject: [PATCH 7/8] lint

---
 index.html   | 2 --
 src/index.ts | 4 +---
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 44f88f9..c5acacc 100644
--- a/index.html
+++ b/index.html
@@ -43,12 +43,10 @@
       justify-content: center;
       padding: 20px;
     }
-    /* Example: Style all banner containers */
     .ts-banner {
       padding: 10px;
       margin: 10px;
     }
-    /* Example: Target banners with specific width */
     .ts-banner[data-ts-width="800"] {
       border: 1px solid #ddd;
     }
diff --git a/src/index.ts b/src/index.ts
index 3c7b9d2..4b3d969 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -104,10 +104,8 @@ function getBannerElement(
     }
   })();
 
-  // Build class string: use existing ts-banner class, plus any custom class
   const containerClass = bannerClass ? `ts-banner ${bannerClass}` : "ts-banner";
 
-  // Build style string with CSS custom properties for width/height (easily retrievable)
   const containerStyle = [
     "display: block",
     width ? `--ts-banner-width: ${width}px` : "",
@@ -116,7 +114,7 @@ function getBannerElement(
     .filter(Boolean)
     .join("; ");
 
-  // Media element styles - minimal, let CSS cascade
+  // let CSS cascade
   const mediaStyle =
     width && height
       ? `width: ${width}px; height: ${height}px; object-fit: cover;`

From 3baa6ffb98f3e747b4017901edd1458a47c12221 Mon Sep 17 00:00:00 2001
From: Guilherme Pimenta 
Date: Fri, 14 Nov 2025 18:20:26 -0300
Subject: [PATCH 8/8] lint

---
 src/index.ts | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 4b3d969..3c725a3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -244,21 +244,21 @@ export class TopsortBanner extends BannerComponent(LitElement) {
       });
     }
 
-     if (
-       changedProperties.has("width") ||
-       changedProperties.has("height") ||
-       changedProperties.has("newTab") ||
-       changedProperties.has("bannerClass")
-     ) {
-       Promise.resolve().then(() => {
-         this.context = {
-           width: this.width,
-           height: this.height,
-           newTab: this.newTab,
-           bannerClass: this.bannerClass,
-         };
-       });
-     }
+    if (
+      changedProperties.has("width") ||
+      changedProperties.has("height") ||
+      changedProperties.has("newTab") ||
+      changedProperties.has("bannerClass")
+    ) {
+      Promise.resolve().then(() => {
+        this.context = {
+          width: this.width,
+          height: this.height,
+          newTab: this.newTab,
+          bannerClass: this.bannerClass,
+        };
+      });
+    }
   }
 
   // avoid shadow dom since we cannot attach to events via analytics.js