Update callout.css

package.json

@@ -101,6 +101,7 @@
     "del": "^7.1.0",
     "download": "^8.0.0",
     "esbuild": "^0.19.4",
+    "esbuild-plugin-lit-css": "^3.0.1",
     "esbuild-plugin-replace": "^1.4.0",
     "eslint": "^8.51.0",
     "eslint-plugin-chai-expect": "^3.0.0",

scripts/build.js

@@ -10,6 +10,7 @@ import browserSync from 'browser-sync';
 import chalk from 'chalk';
 import copy from 'recursive-copy';
 import esbuild from 'esbuild';
+import { litCssPlugin } from 'esbuild-plugin-lit-css';
 import getPort, { portNumbers } from 'get-port';
 import ora from 'ora';
 import process from 'process';
@@ -171,7 +172,7 @@ async function generateBundle() {
     bundle: true,
     splitting: true,
     minify: false,
-    plugins: [replace({ __WEBAWESOME_VERSION__: version })]
+    plugins: [replace({ __WEBAWESOME_VERSION__: version }), litCssPlugin()]
   };
 
   const unbundledConfig = {

src/components/callout/callout.css

@@ -0,0 +1,64 @@
+:host {
+  --icon-color: currentColor;
+  --icon-size: var(--wa-font-size-l);
+  --spacing: var(--wa-space-m);
+
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  border-radius: var(--wa-panel-border-radius);
+  background-color: var(--background-color);
+  border-color: var(--border-color);
+  border-style: var(--wa-panel-border-style);
+  border-width: var(--wa-panel-border-width);
+  color: var(--content-color);
+  padding: var(--spacing);
+}
+
+:host([variant='brand']) {
+  --background-color: var(--wa-color-brand-fill-quiet);
+  --border-color: var(--wa-color-brand-border-quiet);
+  --content-color: var(--wa-color-brand-on-normal);
+}
+
+:host([variant='success']) {
+  --background-color: var(--wa-color-success-fill-quiet);
+  --border-color: var(--wa-color-success-border-quiet);
+  --content-color: var(--wa-color-success-on-normal);
+}
+
+:host([variant='neutral']) {
+  --background-color: var(--wa-color-neutral-fill-quiet);
+  --border-color: var(--wa-color-neutral-border-quiet);
+  --content-color: var(--wa-color-neutral-on-normal);
+}
+
+:host([variant='warning']) {
+  --background-color: var(--wa-color-warning-fill-quiet);
+  --border-color: var(--wa-color-warning-border-quiet);
+  --content-color: var(--wa-color-warning-on-normal);
+}
+
+:host([variant='danger']) {
+  --background-color: var(--wa-color-danger-fill-quiet);
+  --border-color: var(--wa-color-danger-border-quiet);
+  --content-color: var(--wa-color-danger-on-normal);
+}
+
+[part~='icon'] {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  color: var(--icon-color);
+  font-size: var(--icon-size);
+
+  ::slotted(*) {
+    margin-inline-end: var(--spacing);
+  }
+}
+
+[part~='message'] {
+  flex: 1 1 auto;
+  display: block;
+  overflow: hidden;
+}

src/components/callout/callout.style.ts

@@ -1,68 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --icon-color: currentColor;
-    --icon-size: var(--wa-font-size-l);
-    --spacing: var(--wa-space-m);
-
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    border-radius: var(--wa-panel-border-radius);
-    background-color: var(--background-color);
-    border-color: var(--border-color);
-    border-style: var(--wa-panel-border-style);
-    border-width: var(--wa-panel-border-width);
-    color: var(--content-color);
-    padding: var(--spacing);
-  }
-
-  :host([variant='brand']) {
-    --background-color: var(--wa-color-brand-fill-quiet);
-    --border-color: var(--wa-color-brand-border-quiet);
-    --content-color: var(--wa-color-brand-on-normal);
-  }
-
-  :host([variant='success']) {
-    --background-color: var(--wa-color-success-fill-quiet);
-    --border-color: var(--wa-color-success-border-quiet);
-    --content-color: var(--wa-color-success-on-normal);
-  }
-
-  :host([variant='neutral']) {
-    --background-color: var(--wa-color-neutral-fill-quiet);
-    --border-color: var(--wa-color-neutral-border-quiet);
-    --content-color: var(--wa-color-neutral-on-normal);
-  }
-
-  :host([variant='warning']) {
-    --background-color: var(--wa-color-warning-fill-quiet);
-    --border-color: var(--wa-color-warning-border-quiet);
-    --content-color: var(--wa-color-warning-on-normal);
-  }
-
-  :host([variant='danger']) {
-    --background-color: var(--wa-color-danger-fill-quiet);
-    --border-color: var(--wa-color-danger-border-quiet);
-    --content-color: var(--wa-color-danger-on-normal);
-  }
-
-  [part~='icon'] {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    color: var(--icon-color);
-    font-size: var(--icon-size);
-
-    ::slotted(*) {
-      margin-inline-end: var(--spacing);
-    }
-  }
-
-  [part~='message'] {
-    flex: 1 1 auto;
-    display: block;
-    overflow: hidden;
-  }
-`;

src/components/callout/callout.ts

@@ -1,7 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
 import componentStyles from '../../styles/component.styles.js';
-import styles from './callout.style.js';
+import styles from './callout.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import type { CSSResultGroup } from 'lit';
 

src/components/viewport-demo/viewport-demo.css

@@ -0,0 +1,154 @@
+:host {
+  --viewport-background-color: var(--wa-color-surface-default, canvas);
+  --viewport-resize: both;
+  --viewport-min-width: 10em;
+  --viewport-min-height: 5em;
+  --viewport-max-width: 100%;
+  --viewport-padding: var(--wa-space-2xl, 2rem);
+  --viewport-initial-aspect-ratio: 16 / 9;
+  --viewport-bezel-width: 0.25em;
+
+  display: block;
+  /* Needed for measuring the available space */
+  contain: inline-size;
+  container-type: inline-size;
+  container-name: host;
+}
+
+[part~='frame'] {
+  --zoom: 1; /* overridden by JS */
+  --available-width: calc((100cqw - var(--offset-inline, 0px)));
+  --iframe-manual-aspect-ratio: calc(var(--iframe-manual-width-px) / var(--iframe-manual-height-px));
+  --iframe-manual-width: calc(var(--iframe-manual-width-px) * 1px * var(--zoom));
+  --iframe-manual-height: calc(var(--iframe-manual-height-px) * 1px * var(--zoom));
+  --width: var(--iframe-manual-width, var(--available-width));
+  --height-auto: calc(var(--width) / (var(--aspect-ratio)));
+
+  --_aspect-ratio: calc(var(--viewport-width-px) / var(--viewport-height-px));
+  --aspect-ratio: var(--_aspect-ratio, var(--viewport-initial-aspect-ratio));
+
+  display: flex;
+  flex-flow: column;
+  align-items: start;
+
+  width: fit-content;
+  height: fit-content;
+
+  /* Style frame like a window */
+  border: var(--viewport-bezel-width) solid transparent;
+  border-radius: calc(var(--wa-border-radius-s));
+
+  /* Window-like frame styling */
+  --button-params: 0.4em / 0.5em 0.5em border-box;
+  background:
+    radial-gradient(circle closest-side, var(--wa-color-red-60) 80%, var(--wa-color-red-50) 98%, transparent) 0.4em
+      var(--button-params),
+    radial-gradient(circle closest-side, var(--wa-color-yellow-80) 80%, var(--wa-color-yellow-70) 98%, transparent)
+      1.1em var(--button-params),
+    radial-gradient(circle closest-side, var(--wa-color-green-70) 80%, var(--wa-color-green-60) 98%, transparent) 1.8em
+      var(--button-params),
+    var(--wa-color-gray-95);
+  background-repeat: no-repeat;
+  box-shadow:
+    0 0 0 1px var(--wa-color-gray-90),
+    var(--wa-shadow-m);
+
+  &.resized {
+    aspect-ratio: var(--iframe-manual-aspect-ratio);
+  }
+
+  /* User has not yet resized the viewport */
+  &:not(.resized) ::slotted(iframe),
+  &:not(.resized) slot {
+    /* Will only be set if we have BOTH width and height */
+    aspect-ratio: var(--aspect-ratio);
+  }
+}
+
+slot {
+  display: block;
+  overflow: clip;
+  width: var(--width);
+  max-width: var(--available-width);
+  height: var(--iframe-manual-height, var(--height-auto));
+}
+
+::slotted(iframe) {
+  display: block;
+  flex: auto;
+  scale: var(--zoom);
+  transform-origin: top left;
+  resize: var(--viewport-resize);
+  overflow: auto;
+
+  /* The width and height specified here are only applied if the iframe is not manually resized */
+  width: calc(var(--available-width) / var(--zoom));
+  height: calc(var(--height-auto) / var(--zoom));
+
+  min-width: calc(var(--viewport-min-width, 10em) / var(--zoom));
+  max-width: calc(var(--available-width) / var(--zoom)) !important;
+  min-height: calc(var(--viewport-min-height) / var(--zoom));
+
+  /* Divide with var(--zoom) to get lengths that stay constant regardless of zoom level */
+  border: calc(1px / var(--zoom)) solid var(--wa-color-gray-90);
+  background: var(--viewport-background-color);
+}
+
+[part~='controls'] {
+  display: flex;
+  align-items: center;
+  align-self: end;
+  gap: 0.3em;
+  margin-top: -0.2em;
+  font-size: var(--wa-font-size-xs);
+  padding-block-end: 0.25em;
+  padding-inline: 1em 0.2em;
+  white-space: nowrap;
+
+  /* Until we can implement info that is not lying, we don’t show it when it's lying */
+  .needs-internal-zoom & > * {
+    opacity: 0 !important;
+    pointer-events: none;
+  }
+
+  .dimensions {
+    word-spacing: -0.15em;
+    margin-inline-end: 1em;
+  }
+
+  wa-icon {
+    display: none;
+    vertical-align: -0.1em;
+    font-size: 85%;
+    color: var(--wa-color-gray-70);
+  }
+
+  wa-icon-button {
+    &:not(:hover, :focus) {
+      opacity: 0.5;
+    }
+
+    &::part(base) {
+      padding: 0;
+    }
+  }
+
+  .zoom {
+    display: flex;
+    align-items: center;
+    gap: 0.3em;
+    font-weight: 600;
+    color: var(--wa-color-text-quiet);
+    opacity: 80%;
+  }
+
+  [part~='zoom-in'],
+  [part~='zoom-in']::part(base) {
+    cursor: zoom-in;
+  }
+
+  [part~='zoom-out'],
+  [part~='zoom-out']::part(base) {
+    cursor: zoom-out;
+  }
+}

src/components/viewport-demo/viewport-demo.styles.ts

@@ -1,158 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --viewport-background-color: var(--wa-color-surface-default, canvas);
-    --viewport-resize: both;
-    --viewport-min-width: 10em;
-    --viewport-min-height: 5em;
-    --viewport-max-width: 100%;
-    --viewport-padding: var(--wa-space-2xl, 2rem);
-    --viewport-initial-aspect-ratio: 16 / 9;
-    --viewport-bezel-width: 0.25em;
-
-    display: block;
-    /* Needed for measuring the available space */
-    contain: inline-size;
-    container-type: inline-size;
-    container-name: host;
-  }
-
-  [part~='frame'] {
-    --zoom: 1; /* overridden by JS */
-    --available-width: calc((100cqw - var(--offset-inline, 0px)));
-    --iframe-manual-aspect-ratio: calc(var(--iframe-manual-width-px) / var(--iframe-manual-height-px));
-    --iframe-manual-width: calc(var(--iframe-manual-width-px) * 1px * var(--zoom));
-    --iframe-manual-height: calc(var(--iframe-manual-height-px) * 1px * var(--zoom));
-    --width: var(--iframe-manual-width, var(--available-width));
-    --height-auto: calc(var(--width) / (var(--aspect-ratio)));
-
-    --_aspect-ratio: calc(var(--viewport-width-px) / var(--viewport-height-px));
-    --aspect-ratio: var(--_aspect-ratio, var(--viewport-initial-aspect-ratio));
-
-    display: flex;
-    flex-flow: column;
-    align-items: start;
-
-    width: fit-content;
-    height: fit-content;
-
-    /* Style frame like a window */
-    border: var(--viewport-bezel-width) solid transparent;
-    border-radius: calc(var(--wa-border-radius-s));
-
-    /* Window-like frame styling */
-    --button-params: 0.4em / 0.5em 0.5em border-box;
-    background:
-      radial-gradient(circle closest-side, var(--wa-color-red-60) 80%, var(--wa-color-red-50) 98%, transparent) 0.4em
-        var(--button-params),
-      radial-gradient(circle closest-side, var(--wa-color-yellow-80) 80%, var(--wa-color-yellow-70) 98%, transparent)
-        1.1em var(--button-params),
-      radial-gradient(circle closest-side, var(--wa-color-green-70) 80%, var(--wa-color-green-60) 98%, transparent)
-        1.8em var(--button-params),
-      var(--wa-color-gray-95);
-    background-repeat: no-repeat;
-    box-shadow:
-      0 0 0 1px var(--wa-color-gray-90),
-      var(--wa-shadow-m);
-
-    &.resized {
-      aspect-ratio: var(--iframe-manual-aspect-ratio);
-    }
-
-    /* User has not yet resized the viewport */
-    &:not(.resized) ::slotted(iframe),
-    &:not(.resized) slot {
-      /* Will only be set if we have BOTH width and height */
-      aspect-ratio: var(--aspect-ratio);
-    }
-  }
-
-  slot {
-    display: block;
-    overflow: clip;
-    width: var(--width);
-    max-width: var(--available-width);
-    height: var(--iframe-manual-height, var(--height-auto));
-  }
-
-  ::slotted(iframe) {
-    display: block;
-    flex: auto;
-    scale: var(--zoom);
-    transform-origin: top left;
-    resize: var(--viewport-resize);
-    overflow: auto;
-
-    /* The width and height specified here are only applied if the iframe is not manually resized */
-    width: calc(var(--available-width) / var(--zoom));
-    height: calc(var(--height-auto) / var(--zoom));
-
-    min-width: calc(var(--viewport-min-width, 10em) / var(--zoom));
-    max-width: calc(var(--available-width) / var(--zoom)) !important;
-    min-height: calc(var(--viewport-min-height) / var(--zoom));
-
-    /* Divide with var(--zoom) to get lengths that stay constant regardless of zoom level */
-    border: calc(1px / var(--zoom)) solid var(--wa-color-gray-90);
-    background: var(--viewport-background-color);
-  }
-
-  [part~='controls'] {
-    display: flex;
-    align-items: center;
-    align-self: end;
-    gap: 0.3em;
-    margin-top: -0.2em;
-    font-size: var(--wa-font-size-xs);
-    padding-block-end: 0.25em;
-    padding-inline: 1em 0.2em;
-    white-space: nowrap;
-
-    /* Until we can implement info that is not lying, we don’t show it when it's lying */
-    .needs-internal-zoom & > * {
-      opacity: 0 !important;
-      pointer-events: none;
-    }
-
-    .dimensions {
-      word-spacing: -0.15em;
-      margin-inline-end: 1em;
-    }
-
-    wa-icon {
-      display: none;
-      vertical-align: -0.1em;
-      font-size: 85%;
-      color: var(--wa-color-gray-70);
-    }
-
-    wa-icon-button {
-      &:not(:hover, :focus) {
-        opacity: 0.5;
-      }
-
-      &::part(base) {
-        padding: 0;
-      }
-    }
-
-    .zoom {
-      display: flex;
-      align-items: center;
-      gap: 0.3em;
-      font-weight: 600;
-      color: var(--wa-color-text-quiet);
-      opacity: 80%;
-    }
-
-    [part~='zoom-in'],
-    [part~='zoom-in']::part(base) {
-      cursor: zoom-in;
-    }
-
-    [part~='zoom-out'],
-    [part~='zoom-out']::part(base) {
-      cursor: zoom-out;
-    }
-  }
-`;

src/components/viewport-demo/viewport-demo.ts

@@ -6,7 +6,7 @@ import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
-import styles from './viewport-demo.styles.js';
+import styles from './viewport-demo.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import type { CSSResultGroup } from 'lit';