fix(lib): use display: contents for host containers

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phosphor-icons/webcomponents",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "A flexible icon family for the web",
   "author": "rektdeckard",
   "license": "MIT",

scripts/assemble.ts

@@ -59,7 +59,7 @@ function generateComponents(icons: AssetMap) {
 
     const componentString = `\
 /* GENERATED FILE */
-import { html, svg, LitElement } from 'lit';
+import { html, svg, css, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import type { IconWeight, IconAttrs } from '../types';
@@ -111,6 +111,8 @@ class Ph${name} extends LitElement {
       \${Ph${name}.weightsMap.get(this.weight ?? "regular")}
     </svg>\`;
   }
+
+  static styles = css\`:host { display: contents }\`;
 }
 
 export { Ph${name} }

src/icons/PhAcorn.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAcorn extends LitElement {
       ${PhAcorn.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAcorn };

src/icons/PhAddressBook.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAddressBook extends LitElement {
       ${PhAddressBook.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAddressBook };

src/icons/PhAddressBookTabs.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAddressBookTabs extends LitElement {
       ${PhAddressBookTabs.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAddressBookTabs };

src/icons/PhAirTrafficControl.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAirTrafficControl extends LitElement {
       ${PhAirTrafficControl.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAirTrafficControl };

src/icons/PhAirplane.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAirplane extends LitElement {
       ${PhAirplane.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAirplane };

src/icons/PhAirplaneInFlight.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAirplaneInFlight extends LitElement {
       ${PhAirplaneInFlight.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAirplaneInFlight };

src/icons/PhAirplaneLanding.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAirplaneLanding extends LitElement {
       ${PhAirplaneLanding.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAirplaneLanding };

src/icons/PhAirplaneTakeoff.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAirplaneTakeoff extends LitElement {
       ${PhAirplaneTakeoff.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAirplaneTakeoff };

src/icons/PhAirplaneTaxiing.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAirplaneTaxiing extends LitElement {
       ${PhAirplaneTaxiing.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAirplaneTaxiing };

src/icons/PhAirplaneTilt.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAirplaneTilt extends LitElement {
       ${PhAirplaneTilt.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAirplaneTilt };

src/icons/PhAirplay.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAirplay extends LitElement {
       ${PhAirplay.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAirplay };

src/icons/PhAlarm.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAlarm extends LitElement {
       ${PhAlarm.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAlarm };

src/icons/PhAlien.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAlien extends LitElement {
       ${PhAlien.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAlien };

src/icons/PhAlignBottom.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAlignBottom extends LitElement {
       ${PhAlignBottom.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAlignBottom };

src/icons/PhAlignBottomSimple.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAlignBottomSimple extends LitElement {
       ${PhAlignBottomSimple.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAlignBottomSimple };

src/icons/PhAlignCenterHorizontal.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAlignCenterHorizontal extends LitElement {
       ${PhAlignCenterHorizontal.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAlignCenterHorizontal };

src/icons/PhAlignCenterHorizontalSimple.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAlignCenterHorizontalSimple extends LitElement {
       ${PhAlignCenterHorizontalSimple.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAlignCenterHorizontalSimple };

src/icons/PhAlignCenterVertical.ts

@@ -1,5 +1,5 @@
 /* GENERATED FILE */
-import { html, svg, LitElement } from "lit";
+import { html, svg, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import type { IconWeight, IconAttrs } from "../types";
@@ -69,6 +69,12 @@ class PhAlignCenterVertical extends LitElement {
       ${PhAlignCenterVertical.weightsMap.get(this.weight ?? "regular")}
     </svg>`;
   }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
 }
 
 export { PhAlignCenterVertical };