Another Tab Container Element

by Nicholas Berlette

HTML

<script
  src="https://esm.sh/@github/tab-container-element@3/dist/index.js"
  type="module"
></script>
<main
  class="relative m-0 h-screen w-screen overflow-y-auto overflow-x-hidden overscroll-contain bg-slate-900 px-0 py-8 dark"
>
  <div
    class="absolute inset-0 h-[calc(100%_-_0rem)] sm:h-screen md:inset-x-4 md:pt-8"
  >
    <div class="mx-auto !h-screen max-w-6xl">
    
      <section id="n-window-1" class="my-8">
        <n-window width="600" height="400" title="NWindow">
          <p>Hello lovely!</p>
        </n-window>
      </section>
      
      <!--browser-->
      <section id="browser-window-1" class="mb-4" style="height: 35rem">
        <h2
          class="text-3xl text-slate-700 font-bold tracking-tighter p-2 mt-4 mb-4 pb-0 border-b border-slate-500/30"
        >
          Browser Window Mockup
        </h2>
        <div class="browser mt-8 md:mt-0" style="height: 20rem">
          <!--window-->
          <div class="window">
            <div class="boundary">
              <!--top-bar-->
              <div class="top-bar">
                <!--navigator-->
                <div class="navigator group">
                  <!--window-buttons-->
                  <div class="traffic-signal !flex-shrink">
                    <button
                      class="btn close group-hover:!bg-opacity-20"
                      aria-label="Close"
                      title="Close Window"
                      id="btn-close-window-1"
                    ></button>
                    <button
                      class="btn minimize group-hover:!bg-opacity-20"
                      aria-label="Minimize Window"
                      title="Minimize Window"
                      id="btn-minimize-window-1"
                    ></button>
                    <button
                      class="btn zoom group-hover:!bg-opacity-20"
                      aria-label="Toggle Fullscreen"
                      title="Toggle Fullscreen"
                     ...

Tailwind CSS

*,
  ::before,
  ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
  }
  ::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
   ...

JavaScript

import * as decorators from "https://esm.sh/v135/[email protected]/X-a24/es2022/decorators.bundle.js"
import * as lithtml from "https://esm.sh/v135/[email protected]/X-a24/es2022/lit-html.bundle.mjs"
import * as lit from "https://esm.sh/[email protected]?bundle&keep-names"
import * as ssr from "https://esm.sh/@lit-labs/ssr?bundle&keep-names"
import _ from "https://esm.sh/[email protected]?bundle"
import { clsx } from "https://esm.sh/v135/@nberlette/[email protected]/X-a24/es2022/clsx.bundle.mjs"

const { customElement, property, query, queryAll } = decorators;
const { css, html, svg, LitElement, ReactiveElement } = lit;

Object.assign(globalThis, decorators, lithtml, lit, {
  lit,
  svg,
  html,
  LitElement,
  ReactiveElement,
  clsx,
  css,
  ssr,
})

export * from "https://esm.sh/v135/[email protected]/X-a24/es2022/decorators.bundle.js"
export * from "https://esm.sh/v135/[email protected]/X-a24/es2022/lit-html.bundle.mjs"
export * from "https://esm.sh/v135/@lit/[email protected]/X-a24/es2022/css-tag.bundle.js"

export class GenericTabbedWindow extends LitElement {
  static styles = css`
    :host {
    }
  `;
  
  static html = (strings, ...values) => {
    return (that) => html.call(void 0, strings.map((s) => tpl(s, that)), ...values.map(function interpolate(v) {
      const u = typeof v === "function" ? v.call(that, that) : v;
      if (isString(u)) return tpl(u, that);
      if (isArray(u.strings, isString) && isArray(u.values)) {
      	return html.call(void 0, u.strings.map(s => tpl(s, that)), ...u.values.map(interpolate));
      }
      return u;
    }));
  };
  
  static templates = {
    $this: () => this,
    buttons: this.html`<div class="traffic-signal">
      <button class="btn close" aria-label="Close" title="Close Window"></button>
      <button class="btn minimize" aria-label="Minimize" title="Minimize Window"></button>
      <button class="btn maximize" aria-label="Maximize" title="Maximize Window"></button>
    </div>`,
    get header() {
      return this.$this().html`<header...