Outline Fall/Winter Update!!

package.json

@@ -123,6 +123,7 @@
     "postcss-discard-comments": "5.1.0",
     "postcss-import": "14.0.2",
     "postcss-loader": "^7.0.1",
+    "postcss-nested-import": "^1.3.0",
     "postcss-preset-env": "^7.8.1",
     "prettier": "^2.0.4",
     "prettier-plugin-tailwindcss": "^0.1.7",

packages/components/outline-core-contained-element.ts

@@ -0,0 +1,88 @@
+import { OutlineElement } from '@phase2/outline-core';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('outline-core-contained-element')
+export class OutlineCoreContainedElement extends OutlineElement {
+  @property({ type: String, reflect: true })
+  padding: string;
+  @property({ type: String, reflect: true, attribute: 'padding-bottom' })
+  paddingBottom: string;
+  @property({ type: String, reflect: true, attribute: 'padding-top' })
+  paddingTop: string;
+  @property({ type: String, attribute: 'padding-left' })
+  paddingLeft: string;
+  @property({ type: String, reflect: true, attribute: 'padding-right' })
+  paddingRight: string;
+  @property({ type: String, reflect: true, attribute: 'padding-inline' })
+  paddingInline: string;
+  @property({ type: String, reflect: true, attribute: 'padding-block' })
+  paddingBlock: string;
+
+  @property({ type: String, reflect: true })
+  margin: string;
+  @property({ type: String, reflect: true, attribute: 'margin-bottom' })
+  marginBottom: string;
+  @property({ type: String, reflect: true, attribute: 'margin-top' })
+  marginTop: string;
+  @property({ type: String, reflect: true, attribute: 'margin-left' })
+  marginLeft: string;
+  @property({ type: String, reflect: true, attribute: 'margin-right' })
+  marginRight: string;
+  @property({ type: String, reflect: true, attribute: 'margin-inline' })
+  marginInline: string;
+  @property({ type: String, reflect: true, attribute: 'margin-block' })
+  marginBlock: string;
+
+  updated(changedProperties: Map<string | number | symbol, unknown>): void {
+    changedProperties.forEach((_, propName) => {
+      if (
+        typeof propName === 'string' &&
+        (propName.startsWith('padding') || propName.startsWith('margin'))
+      ) {
+        const value = this[propName as keyof this] as string;
+
+        if (value && this.isValidCSSValue(value)) {
+          // Set the style property directly
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (this.style as any)[propName] = value;
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (this.style as any)[propName] = null;
+        }
+      }
+    });
+  }
+
+  private isValidCSSValue(value: string): boolean {
+    if (value === '' || value === null || value === undefined) return false;
+    const cssUnits = [
+      'em',
+      'rem',
+      '%',
+      'px',
+      'vh',
+      'vw',
+      'vmin',
+      'vmax',
+      'ex',
+      'ch',
+      'cm',
+      'mm',
+      'in',
+      'pt',
+      'pc',
+    ];
+    const values = value.split(' ').filter(v => v.trim() !== ''); // split by space and filter out any empty strings
+    if (values.length > 4) return false;
+
+    return values.every(
+      v => cssUnits.some(unit => v.endsWith(unit)) || !isNaN(Number(v))
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'outline-core-contained-element': OutlineCoreContainedElement;
+  }
+}

packages/components/outline-core-link/index.ts

@@ -1,3 +1,3 @@
 export { OutlineCoreLink } from './src/outline-core-link';
-export { default as linkVars } from './src/css-variables/vars-link.css.lit';
+export { default as linkVars } from './src/style/outline-core-link.vars.css.lit';
 export type { LinkTargetType, LinkRelType } from './src/config';

packages/components/outline-core-link/package.json

@@ -38,5 +38,8 @@
   },
   "exports": {
     ".": "./index.ts"
+  },
+  "devDependencies": {
+    "postcss-nested-import": "^1.3.0"
   }
 }

packages/components/outline-core-link/src/outline-core-link.ts

@@ -1,12 +1,15 @@
-import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { html, TemplateResult, CSSResultGroup, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 // Our base component, which all others extend.
 import { OutlineElement } from '@phase2/outline-core';
+import { AdoptedStyleSheets } from '@phase2/outline-adopted-stylesheets-controller';
+import componentStyles from './style/outline-core-link.css.lit';
+import componentVars from './style/outline-core-link.vars.css.lit';
+import globalStyles from './style/outline-core-link.lightDom.css.lit';
 
 import type { LinkTargetType, LinkRelType } from './config';
-import componentStyles from './outline-core-link.css.lit';
 
 /** The element name, reused throughout the codebase */
 const componentName = 'outline-core-link';
@@ -30,7 +33,9 @@ const componentName = 'outline-core-link';
  */
 @customElement(componentName)
 export class OutlineCoreLink extends OutlineElement {
-  static styles: CSSResultGroup = [componentStyles];
+  static styles: CSSResultGroup = [componentVars, componentStyles];
+  adoptedStylesheets: AdoptedStyleSheets;
+  debug = false;
 
   /**
    * Link url
@@ -56,6 +61,34 @@ export class OutlineCoreLink extends OutlineElement {
   @property({ type: String, attribute: 'link-rel' })
   linkRel: LinkRelType;
 
+  /**
+   * The `connectedCallback` method is called whenever the element is inserted into the DOM.
+   * In this method, we're creating an instance of `AdoptedStyleSheets` and adding it as a controller.
+   *
+   * Adding the `connectedCallback` controller via  more efficient than creating the instance and adding the controller in the constructor.
+   * The reason is that it delays these operations until the element is actually inserted into the DOM.
+   * If you have many such elements that are created but not immediately added to the DOM,
+   * this can improve the startup performance of your application.
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.adoptedStylesheets = new AdoptedStyleSheets(css`
+      ${componentVars}
+
+      ${globalStyles}
+    `);
+    this.adoptedStylesheets = new AdoptedStyleSheets(globalStyles);
+    this.addController(this.adoptedStylesheets);
+  }
+
+  render(): TemplateResult {
+    if (this.linkHref) {
+      return this.generateLink();
+    } else {
+      return this.fullMarkupInSlot();
+    }
+  }
+
   /**
    * Check to see if the link is external, pass target="_blank" and rel="external" if so. Returns true if the link is external.
    */
@@ -163,21 +196,12 @@ export class OutlineCoreLink extends OutlineElement {
    * @returns HTMLSlotElement
    */
   fullMarkupInSlot(): TemplateResult {
-    if (this.isValidTopLevelSlottedLink()) {
-      this.adjustSlottedContent();
-    } else {
+    this.adjustSlottedContent();
+    if (this.debug) {
       this.debugSlottedContent();
     }
     return html` <slot></slot> `;
   }
-
-  render(): TemplateResult {
-    if (this.linkHref) {
-      return this.generateLink();
-    } else {
-      return this.fullMarkupInSlot();
-    }
-  }
 }
 
 declare global {

packages/components/outline-core-link/src/style/outline-core-link.css

@@ -0,0 +1,24 @@
+:host {
+  @nested-import './outline-core-link.vars.css';
+}
+
+a {
+  font-family: var(--ff-body);
+  text-decoration: var(--outline-core-link--text-decoration--computed);
+  color: var(--outline-core-link--color--computed);
+  transition-property: var(--outline-core-link--transition-property--computed);
+  transition-timing-function: var(
+    --outline-core-link--transition-timing-function--computed
+  );
+  transition-duration: var(--outline-core-link--transition-duration--computed);
+}
+
+a:hover {
+  text-decoration: var(--outline-core-link--text-decoration-hover--computed);
+  color: var(--outline-core-link--color-hover--computed);
+}
+
+a:focus {
+  text-decoration: var(--outline-core-link--text-decoration-focus--computed);
+  color: var(--outline-core-link--color-focus--computed);
+}

packages/components/outline-core-link/src/style/outline-core-link.lightDom.css

@@ -0,0 +1,28 @@
+outline-core-link {
+  @nested-import './outline-core-link.vars.css';
+
+  a {
+    font-family: var(--ff-body);
+    text-decoration: var(--outline-core-link--text-decoration--computed);
+    color: var(--outline-core-link--color--computed);
+    transition-property: var(
+      --outline-core-link--transition-property--computed
+    );
+    transition-timing-function: var(
+      --outline-core-link--transition-timing-function--computed
+    );
+    transition-duration: var(
+      --outline-core-link--transition-duration--computed
+    );
+  }
+
+  a:hover {
+    text-decoration: var(--outline-core-link--text-decoration-hover--computed);
+    color: var(--outline-core-link--color-hover--computed);
+  }
+
+  a:focus {
+    text-decoration: var(--outline-core-link--text-decoration-focus--computed);
+    color: var(--outline-core-link--color-focus--computed);
+  }
+}

packages/components/outline-core-link/src/style/outline-core-link.vars.css

@@ -0,0 +1,41 @@
+--outline-core-link--color--computed: var(
+  --outline-core-link--color,
+  var(--outline-blue-600)
+);
+--outline-core-link--text-decoration--computed: var(
+  --outline-core-link--text-decoration,
+  none
+);
+--outline-core-link--color-hover--computed: var(
+  --outline-core-link--color-hover,
+  var(--outline-gray-600)
+);
+--outline-core-link--text-decoration-hover--computed: var(
+  --outline-core-link--text-decoration-hover,
+  underline
+);
+--outline-core-link--color-focus--computed: var(
+  --outline-core-link--color-focus,
+  var(--outline-gray-600)
+);
+--outline-core-link--text-decoration-focus--computed: var(
+  --outline-core-link--text-decoration-focus,
+  underline
+);
+--outline-core-link--transition-property--computed: var(
+  --outline-core-link--transition-property,
+  color,
+  background-color,
+  border-color,
+  text-decoration-color,
+  fill,
+  stroke
+);
+--outline-core-link--transition-duration--computed: var(
+  --outline-core-link--transition-duration,
+  150ms
+);
+--outline-core-link--transition-timing-function--computed: var(
+  --outline-core-link--transition-timing-function,
+  cubic-bezier(0.4, 0, 0.2, 1)
+);