mits-gossau · J0elFelix · Nov 4, 2025 · Nov 4, 2025 · Nov 4, 2025 · Nov 10, 2025
@@ -6,7 +6,9 @@
 </head>
 
 <body>
-  <a href="./docs/Toolbook.html" target="_blank"><h1>try 👉 Toolbook (alpha)</h1></a>
+  <a href="./docs/Toolbook.html" target="_blank">
+    <h1>try 👉 Toolbook (alpha)</h1>
+  </a>
   <div id="overview"></div>
   <hr>
   <h1>web-components-toolbox</h1>
@@ -275,6 +277,7 @@ <h3>Teaser</h3>
         <li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/download-/download-.html">"download-" Page</a> / <a href=./src/es/components/molecules/teaser/download-/download-.html>"download-" Plain</a></li>
         <li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/round-/round-.html">"round-" Page</a> / <a href=./src/es/components/molecules/teaser/round-/round-.html>"round-" Plain</a></li>
         <li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/plain-/plain-.html">"plain-" Page</a> / <a href=./src/es/components/molecules/teaser/plain-/plain-.html>"plain-" Plain</a></li>
+        <li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/plain-no-border-/plain-no-border-.html">"plain-no-border-" Page</a> / <a href=./src/es/components/molecules/teaser/plain-no-border-/plain-no-border-.html>"plain-no-border-" Plain</a></li>
         <li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/plainer-/plainer-.html">"plainer-" Page</a> / <a href=./src/es/components/molecules/teaser/plainer-/plainer-.html>"plain-" Plain</a></li>
         <li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/text-image-/text-image-.html">"text-image-" Page</a> / <a href=./src/es/components/molecules/teaser/text-image-/text-image-.html>"text-image-" Plain</a></li>
       </ul>
@@ -393,15 +396,15 @@ <h3>HistoryGallery</h3>
           </ul>
         `
   </script>
-    <h3>FactsAndFigures</h3>
-    <div id=FactsAndFigures></div>
-    <script>
-      document.querySelector('#FactsAndFigures').innerHTML = /* HTML */`
+  <h3>FactsAndFigures</h3>
+  <div id=FactsAndFigures></div>
+  <script>
+    document.querySelector('#FactsAndFigures').innerHTML = /* HTML */`
             <ul>
               <li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/factsAndFigures/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/factsAndFigures/default-/default-.html>"default-" Plain</a></li>
             </ul>
           `
-    </script>
+  </script>
   <h3>EmotionCarousel</h3>
   <div id=emotionCarousel></div>
   <script>
@@ -411,24 +414,24 @@ <h3>EmotionCarousel</h3>
       </ul>
     `
   </script>
-    <h3>ImageMitHotspot</h3>
-    <div id=imageMitHotspot></div>
-    <script>
-      document.querySelector('#imageMitHotspot').innerHTML = /* HTML */`
+  <h3>ImageMitHotspot</h3>
+  <div id=imageMitHotspot></div>
+  <script>
+    document.querySelector('#imageMitHotspot').innerHTML = /* HTML */`
         <ul>
           <li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/imageHotspot/ImageHotspot.html">"default-" Page</a> / <a href=./src/es/components/molecules/imageHotspot/ImageHotspot.html>"default-" Plain</a></li>
         </ul>
       `
-    </script>
-   <h3>BentoGridTeaser</h3>
-    <div id=bentoGridTeaser></div>
-    <script>
-      document.querySelector('#bentoGridTeaser').innerHTML = /* HTML */`
+  </script>
+  <h3>BentoGridTeaser</h3>
+  <div id=bentoGridTeaser></div>
+  <script>
+    document.querySelector('#bentoGridTeaser').innerHTML = /* HTML */`
         <ul>
           <li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/bentoGridTeaser/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/bentoGridTeaser/default-/default-.html>"default-" Plain</a></li>
         </ul>
       `
-    </script>
+  </script>
   <h3>MetaHeader</h3>
   <div id=metaheader></div>
   <script>

@@ -11,7 +11,7 @@ import { Intersection } from '../../prototypes/Intersection.js'
  * @type {CustomElementConstructor}
  */
 export default class Teaser extends Intersection() {
-  constructor (options = {}, ...args) {
+  constructor(options = {}, ...args) {
     super({
       importMetaUrl: import.meta.url,
       intersectionObserverInit: { rootMargin: '0px 0px 0px 0px' },
@@ -32,7 +32,7 @@ export default class Teaser extends Intersection() {
     }
   }
 
-  connectedCallback () {
+  connectedCallback() {
     super.connectedCallback()
     this.hidden = true
     const showPromises = []
@@ -58,15 +58,15 @@ export default class Teaser extends Intersection() {
     }
   }
 
-  disconnectedCallback () {
+  disconnectedCallback() {
     super.disconnectedCallback()
     if (this.getAttribute('namespace') === 'teaser-overlay-') {
       this.removeEventListener('mouseover', this.mouseoverListener)
       this.removeEventListener('mouseout', this.mouseoutListener)
     }
   }
 
-  intersectionCallback (entries, observer) {
+  intersectionCallback(entries, observer) {
     this.classList[this.areEntriesIntersecting(entries) ? 'add' : 'remove']('intersecting')
   }
 
@@ -75,7 +75,7 @@ export default class Teaser extends Intersection() {
    *
    * @return {boolean}
    */
-  shouldRenderCSS () {
+  shouldRenderCSS() {
     return !this.root.querySelector(`${this.cssSelector} > style[_css]`)
   }
 
@@ -84,7 +84,7 @@ export default class Teaser extends Intersection() {
    *
    * @return {Promise<void>}
    */
-  renderCSS () {
+  renderCSS() {
     if (this.getAttribute('namespace') === 'teaser-overlay-' && this.aArrow) this.aArrow.setAttribute('hover-set-by-outside', '')
     this.css = /* css */`
       :host {
@@ -209,7 +209,7 @@ export default class Teaser extends Intersection() {
    *
    * @return {Promise<void>}
    */
-  fetchTemplate () {
+  fetchTemplate() {
     /** @type {import("../../prototypes/Shadow.js").fetchCSSParams[]} */
     const styles = [
       {
@@ -279,6 +279,11 @@ export default class Teaser extends Intersection() {
           path: `${this.importMetaUrl}./plain-/plain-.css`, // apply namespace since it is specific and no fallback
           namespace: false
         }, ...styles], false)
+      case 'teaser-plain-no-border-':
+        return this.fetchCSS([{
+          path: `${this.importMetaUrl}./plain-no-border-/plain-no-border-.css`, // apply namespace since it is specific and no fallback
+          namespace: false
+        }, ...styles], false)
       case 'teaser-plainer-':
         return this.fetchCSS([{
           path: `${this.importMetaUrl}./plainer-/plainer-.css`, // apply namespace since it is specific and no fallback
@@ -294,7 +299,7 @@ export default class Teaser extends Intersection() {
     }
   }
 
-  checkIfLink () {
+  checkIfLink() {
     // accessible and seo conform a tag wrapped around this component
     if (this.hasAttribute('href') && this.parentNode) {
       const a = document.createElement('a')
@@ -307,15 +312,15 @@ export default class Teaser extends Intersection() {
       a.style.textDecoration = 'inherit'
       this.parentNode.replaceChild(a, this)
       a.appendChild(this)
-      this.checkIfLink = () => {}
+      this.checkIfLink = () => { }
     }
   }
 
-  get aPicture () {
+  get aPicture() {
     return this.root.querySelector('a-picture')
   }
 
-  get aArrow () {
+  get aArrow() {
     return this.root.querySelector('a-arrow')
   }
 }
@@ -36,6 +36,10 @@
     {
       "name": "teaser-plain-",
       "path": "./plain-/plain-.css"
+    },
+      {
+      "name": "teaser-plain-no-border-",
+      "path": "./plain-no-border-/plain-no-border-.css"
     },
     {
       "name": "teaser-plainer-",

@@ -0,0 +1,36 @@
+:host {
+  --color: var(--teaser-plain-no-border-color);
+  --teaser-plain-no-border-a-picture-figcaption-background-color-hover: var(--teaser-plain-no-border-a-picture-figcaption-background-color-hover-custom,var(--teaser-plain-no-border-background-color-hover-custom, var(--teaser-plain-no-border-background-color)));
+  --teaser-plain-no-border-a-picture-margin: var(--teaser-plain-no-border-a-picture-margin-custom, 0.6em);
+  --teaser-plain-no-border-a-picture-width: calc(100% - var(--teaser-plain-no-border-a-picture-margin) * 2);
+  --teaser-plain-no-border-background-color: var(--teaser-plain-no-border-background-color-custom, var(--color-secondary, var(--background-color, var(--m-white))));
+  --teaser-plain-no-border-border-radius-mobile: var(--teaser-plain-no-border-border-radius-mobile-custom, 0.571em);
+  --teaser-plain-no-border-border-radius: var(--teaser-plain-no-border-border-radius-custom, 0.5em);
+  --teaser-plain-no-border-color: var(--teaser-plain-no-border-color-custom, var(--background-color, var(--m-white)));
+  --teaser-plain-no-border-figcaption-any-opacity: 0;
+  --teaser-plain-no-border-figcaption-any-transform-origin: center top;
+  --teaser-plain-no-border-figcaption-any-transform: var(--teaser-plain-no-border-figcaption-any-transform-custom, perspective(400px) rotateX(-45deg));
+  --teaser-plain-no-border-figcaption-any-transition: transform .45s .6s cubic-bezier(.17,.67,.28,1),opacity .45s .4s cubic-bezier(.17,.67,.28,1), opacity 0.3s .4s ease-out;
+  --teaser-plain-no-border-figcaption-background-color-hover: var(--teaser-plain-no-border-background-color-hover-custom, var(--color-hover, var(--teaser-plain-no-border-background-color)));
+  --teaser-plain-no-border-figcaption-background-color: var(--teaser-plain-no-border-figcaption-background-color-custom, var(--teaser-plain-no-border-background-color));
+  --teaser-plain-no-border-figcaption-bg-color-equal-padding: var(--teaser-plain-no-border-figcaption-bg-color-equal-padding-custom, 0.625em 0 0);
+  --teaser-plain-no-border-figcaption-display: flex;
+  --teaser-plain-no-border-figcaption-flex-direction: column;
+  --teaser-plain-no-border-figcaption-justify-content: var(--teaser-plain-no-border-figcaption-justify-content-custom, flex-end);
+  --teaser-plain-no-border-figcaption-padding: 0.625em;
+  --teaser-plain-no-border-figcaption-transition: background-color 0.3s ease-out;
+  --teaser-plain-no-border-h-color: var(--teaser-plain-no-border-color);
+  --teaser-plain-no-border-h2-margin: var(--teaser-plain-no-border-h2-margin-custom);
+  --teaser-plain-no-border-h5-margin: 0 0 0.5em;
+  --teaser-plain-no-border-intersecting-figcaption-any-opacity: 1;
+  --teaser-plain-no-border-intersecting-figcaption-any-transform: var(--teaser-plain-no-border-intersecting-figcaption-any-transform-custom, perspective(400px) rotateX(0));
+  --teaser-plain-no-border-p-font-size: 0.875em;
+  --teaser-plain-no-border-p-line-height: var(--teaser-plain-no-border-p-line-height-custom, 1.14em);
+  --teaser-plain-no-border-p-margin: 0 0 0.625em;
+}
+@media only screen and (max-width: _max-width_) {
+  :host {
+    --teaser-plain-no-border-p-font-size: var(--p-font-size-mobile, var(--p-font-size, 1em));
+    --teaser-plain-no-border-p-line-height: var(--p-line-height-mobile, var(--p-line-height, var(--line-height, normal)));
+  }
+}
@@ -0,0 +1,75 @@
+<o-body-style color-secondary=#97A619 color-hover=#737E13>
+
+  <h1>Nur Titel:</h1>
+
+  <o-wrapper namespace=wrapper-teaser->
+    <m-teaser namespace=teaser-overlay- href="http://www.jowa.ch">
+      <figure>
+        <a-picture namespace="picture-teaser-" picture-load defaultSource="./img/test-img-1.jpeg"
+          alt="randomized image"></a-picture>
+        <h3 class="bg-color">Titel unter dem Bild</h3>
+      </figure>
+    </m-teaser>
+
+    <m-teaser namespace=teaser-overlay- href="http://www.jowa.ch">
+      <figure>
+        <a-picture namespace="picture-teaser-" picture-load defaultSource="./img/test-img-2.jpeg"
+          alt="randomized image"></a-picture>
+        <h3 class="bg-color">Titel unter dem Bild</h3>
+      </figure>
+    </m-teaser>
+
+    <m-teaser namespace=teaser-overlay- href="http://www.jowa.ch">
+      <figure>
+        <a-picture namespace="picture-teaser-" picture-load defaultSource="./img/test-img-3.jpeg"
+          alt="randomized image"></a-picture>
+        <h3 class="bg-color">Titel über dem Bild</h3>
+      </figure>
+    </m-teaser>
+
+  </o-wrapper>
+
+</o-body-style>
+
+
+<o-body-style color-secondary=#8d2b4d color-hover=#6a243d>
+
+  <h1>Titel und Text:</h1>
+
+  <o-wrapper namespace=wrapper-teaser->
+    <m-teaser namespace=teaser-overlay- href="http://www.jowa.ch">
+      <figure>
+        <a-picture namespace="picture-teaser-" picture-load defaultSource="./img/test-img-1.jpeg"
+          alt="randomized image"></a-picture>
+        <h3 class="bg-color">Titel unter dem Bild</h3>
+        <h5 class="bg-color">Weiterer Text</h5>
+      </figure>
+    </m-teaser>
+
+    <m-teaser namespace=teaser-overlay- href="http://www.jowa.ch">
+      <figure>
+        <a-picture namespace="picture-teaser-" picture-load defaultSource="./img/test-img-2.jpeg"
+          alt="randomized image"></a-picture>
+        <h3 class="bg-color">Titel unter dem Bild</h3>
+        <h5 class="bg-color">Weiterer Text</h5>
+      </figure>
+    </m-teaser>
+
+    <m-teaser namespace=teaser-overlay- href="http://www.jowa.ch">
+      <figure>
+        <a-picture namespace="picture-teaser-" picture-load defaultSource="./img/test-img-3.jpeg"
+          alt="randomized image"></a-picture>
+        <h3 class="bg-color">Titel über dem Bild</h3>
+        <h5 class="bg-color">Weiterer Text</h5>
+      </figure>
+    </m-teaser>
+
+  </o-wrapper>
+
+</o-body-style>
+
+
+<!-- load web components for Demo Purposes Only -->
+<script class="template-script" type="text/javascript" src="./plain-no-border-.js"></script>
+<script type="text/javascript" src="../../../../../../docs/es/loader.js"></script>
+<script type="text/javascript" src="../../../../../../docs/es/documenter.js?component=Teaser.js"></script>
@@ -0,0 +1,3 @@
+// For Demo Purposes Only
+document.body.setAttribute('style', '--background-color: #eee;')
+if (document.querySelector(':root')) document.querySelector(':root').setAttribute('style', '--background-color: #eee;')
@@ -18,6 +18,7 @@ n/a
 | teaser-overlay- | `./overlay-/overlay-.css` |
 | teaser-overlay-top- | `./overlay-top-/overlay-top-.css` |
 | teaser-plain- | `./plain-/plain-.css` |
+| teaser-plain-no-border- | `./plain-no-border/plain-no-border-.css` |
 | teaser-plainer- | `./plainer-/plainer-.css` |
 | teaser-round- | `./round-/round-.css` |
 | teaser-text-image- | `./text-image-/text-image-.css` |