Refactor adjustments and tweaks

.eslintignore

@@ -18,4 +18,4 @@ storybook-static/
 .yarn/
 project/
 *.d.ts
-packages/tools/outline-cli/
+packages/deprecated

.github/workflows/build.yml

@@ -34,14 +34,19 @@ jobs:
   setup:
     name: Install & Lint Codebase
     runs-on: ubuntu-latest
+    container: 
+      image: node:lts
     # The steps for the setup job.
     steps:
       # @see https://github.com/marketplace/actions/checkout
       - name: Checkout Codebase
-        uses: actions/checkout@v3 
+        uses: actions/checkout@v4 
+
+      - name: Use local Yarn version
+        run: echo "$(pwd)/.yarn/releases" >> $GITHUB_PATH
 
       # @see https://github.com/marketplace/actions/setup-node-js-environment 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'
@@ -54,30 +59,10 @@ jobs:
           registry-url: 'https://npm.pkg.github.com'
           # Defaults to the user or organization that owns the workflow file
           scope: '@phase2'
-        
+
       - name: Initialize .npmrc
         run: cp $NPM_CONFIG_USERCONFIG .npmrc
 
-      # # @see https://github.com/marketplace/actions/cache
-      # # node_modules caching is validated by always running yarn install.
-      # # Turborepo cache lives inside node_modules/.cache/turbo
-      # - name: Get yarn cache directory path
-      #   id: yarn-cache-dir-path
-      #   run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-
-      # - name: Setup Cache
-      #   id: cache-yarn
-      #   uses: actions/cache@v3
-      #   env:
-      #     cache-name: cache-node-modules
-      #   with:
-      #     path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-      #     key: ${{ runner.os }}-node-yarn-18-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
-      #     restore-keys:
-      #       ${{ runner.os }}-node-yarn-18-${{ env.cache-name }}-
-      #       ${{ runner.os }}-node-yarn-${{ env.cache-name }}-
-      #       ${{ runner.os }}-node-yarn-
-
       - name: Install
         run: yarn install
         env: 
@@ -92,15 +77,20 @@ jobs:
   build_outline:
     name: Build Outline Codebase
     runs-on: ubuntu-latest
+    container: 
+      image: node:lts
     needs: ['setup']
     # The steps for the setup job.
     steps:
       # @see https://github.com/marketplace/actions/checkout
       - name: Checkout Codebase
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+
+      - name: Use local Yarn version
+        run: echo "$(pwd)/.yarn/releases" >> $GITHUB_PATH
 
       # @see https://github.com/marketplace/actions/setup-node-js-environment 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'
@@ -128,16 +118,21 @@ jobs:
     name: "Publish: GitHub Pages"
     if: github.ref == 'refs/heads/next'
     runs-on: ubuntu-latest
+    container: 
+      image: node:lts
     needs: ['setup', 'build_outline']
 
     # The steps for the setup job.
     steps:
       # @see https://github.com/marketplace/actions/checkout
       - name: Checkout codebase
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+
+      - name: Use local Yarn version
+        run: echo "$(pwd)/.yarn/releases" >> $GITHUB_PATH
 
       # @see https://github.com/marketplace/actions/setup-node-js-environment 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'
@@ -150,7 +145,7 @@ jobs:
           registry-url: 'https://npm.pkg.github.com'
           # Defaults to the user or organization that owns the workflow file
           scope: '@phase2'
-
+   
       - name: Install
         run: yarn install
 
@@ -180,7 +175,7 @@ jobs:
 
       # @see https://github.com/marketplace/actions/upload-a-build-artifact
       - name: Upload Storybook artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: storybook-latest
           path: storybook-static/

.storybook/storybook.css

@@ -1,3 +1,3 @@
 @import url('https://rsms.me/inter/inter.css');
 /* Outline */
-@import '../packages/outline-templates/default/outline.theme.css';
+@import '../outline.theme.css';

package.json

@@ -13,10 +13,9 @@
   "workspaces": [
     "./packages/*",
     "./packages/components/*",
-    "./packages/components/@deprecated/*",
+    "./packages/deprecated/*",
     "./packages/documentation/*",
     "./packages/controllers/*",
-    "./packages/controllers/@deprecated/*",
     "./packages/tools/*",
     "./docs"
   ],
@@ -34,18 +33,19 @@
   "license": "BSD-3-Clause",
   "scripts": {
     "analyze": "yarn build && wca analyze 'packages/**/*.ts' --outFiles '{dir}/../README.md'",
-    "build": "turbo run build --concurrency=100% --filter=!./packages/**/@deprecated/*",
+    "build": "turbo run build --concurrency=100%",
     "changeset": "changeset",
     "changeset:publish": "yarn build && yarn changeset:version && yarn changeset publish",
     "changeset:version": "changeset version",
     "chromatic": "chromatic --build-script-name storybook:build --exit-zero-on-changes --skip '@(renovate/**|dependabot/**)'",
-    "clean": "npm-run-all -s clean:*",
+    "clean": "npm-run-all -p clean:*",
     "clean:dist": "rimraf dist && rimraf packages/**/dist",
     "clean:turbo": "rimraf packages/**/.turbo",
     "clean:storybook": "rimraf storybook-static",
     "clean:css": "rimraf packages/**/*.lit.*",
     "clean:maps": "rimraf packages/**/*.map",
     "clean:types": "rimraf packages/**/*.d.ts",
+    "dev": "yarn watch",
     "fix": "yarn format && yarn lint",
     "format": "npm-run-all -s format:*",
     "format:code": "eslint --fix . && prettier --write .",
@@ -56,23 +56,18 @@
     "lint:tsc": "tsc --noEmit",
     "lint:prettier": "prettier --check .",
     "package": "turbo run package --filter=!./packages/**/@deprecated/*",
-    "prep": "npm-run-all -s prep:*",
-    "prep:css": "node scripts/styles.js",
-    "prebuild": "yarn prep",
-    "prestart": "yarn prep",
     "rebuild": "yarn reset && yarn build",
     "reset": "yarn clean && npm-run-all -s reset:*",
     "reset:packages": "rimraf packages/**/node_modules",
-    "reset:root": "rimraf ./node_modules",
+    "reset:root": "rimraf node_modules",
     "reset:install": "yarn install",
     "restart": "yarn reset && yarn start",
-    "start": "yarn watch",
+    "start": "yarn dev",
     "storybook": "storybook",
     "storybook:build": "storybook build",
     "test": "turbo run test",
     "watch": "npm-run-all -p watch:*",
-    "watch:storybook": "yarn storybook dev -p ${npm_package_storybook_port}",
-    "watch:css": "node scripts/styles.js --watch"
+    "watch:storybook": "yarn storybook dev -p ${npm_package_storybook_port}"
   },
   "keywords": [
     "web-components",
@@ -136,5 +131,8 @@
   },
   "readme": "ERROR: No README data found!",
   "homepage": "https://github.com/phase2/outline#readme",
-  "_id": "@phase2/[email protected]"
+  "_id": "@phase2/[email protected]",
+  "dependencies": {
+    "lit": "^3.1.2"
+  }
 }

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

@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@phase2/outline-core": "^0.2.6",
-    "lit": "^2.3.1"
+    "lit": "^3.1.2"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,10 +1,10 @@
-import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { html, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 // Our base component, which all others extend.
 import { OutlineElement } from '@phase2/outline-core';
 
-import componentStyles from './outline-core-accordion.css.lit';
+// import componentStyles from './outline-core-accordion.css.lit';
 
 /** The element name, reused throughout the codebase */
 const componentName = 'outline-core-accordion';
@@ -26,7 +26,7 @@ const componentName = 'outline-core-accordion';
  */
 @customElement(componentName)
 export class OutlineCoreAccordion extends OutlineElement {
-  static styles: CSSResultGroup = [componentStyles];
+  // static styles: CSSResultGroup = [componentStyles];
 
   render(): TemplateResult {
     return html` <slot></slot> `;

packages/components/outline-core-alert/README.md

@@ -6,7 +6,7 @@ The Outline Core Alert component
 
 | Property             | Attribute        | Type                                          | Default | Description                                   |
 |----------------------|------------------|-----------------------------------------------|---------|-----------------------------------------------|
-| `adoptedStylesheets` |                  | `AdoptedStyleSheets`                          |         |                                               |
+| `adoptedStylesheets` |                  | `AdoptedStylesheets`                          |         |                                               |
 | `debug`              |                  | `boolean`                                     | false   |                                               |
 | `isInteractive`      | `is-interactive` | `boolean`                                     | false   | This is important context for screen readers. |
 | `status`             | `status`         | `"info" \| "warning" \| "error" \| "success"` | "info"  |                                               |

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

@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@phase2/outline-core": "^0.2.6",
-    "lit": "^2.3.1"
+    "lit": "^3.1.2"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,15 +1,13 @@
-import { html, TemplateResult, CSSResultGroup, css } from 'lit';
+import { html, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { OutlineElement } from '@phase2/outline-core';
 import {
   CoreAlertStatusType,
   OutlineCoreAlertInterface,
 } from '@phase2/outline-core-alert';
-import { AdoptedStyleSheets } from '@phase2/outline-adopted-stylesheets-controller';
-import componentStyles from './style/outline-core-alert.css.lit';
-import componentVars from './style/outline-core-alert.vars.css.lit';
-import globalStyles from './style/outline-core-alert.lightDom.css.lit';
+import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controller';
+import globalStyles from './style/outline-core-alert.global.css?inline';
 
 /** The element name, reused throughout the codebase */
 const componentName = 'outline-core-alert';
@@ -43,8 +41,11 @@ export class OutlineCoreAlert
   extends OutlineElement
   implements OutlineCoreAlertInterface
 {
-  static styles: CSSResultGroup = [componentStyles];
-  adoptedStylesheets: AdoptedStyleSheets;
+  // static styles: CSSResultGroup = [componentStyles];
+  GlobalStylesheets: AdoptedStylesheets | undefined = new AdoptedStylesheets(
+    this,
+    globalStyles
+  );
   debug = false;
 
   @property({ type: String, attribute: 'status' })
@@ -56,20 +57,6 @@ export class OutlineCoreAlert
   @property({ type: Boolean, attribute: 'is-interactive' })
   isInteractive = false;
 
-  /**
-   * @see `outline-core-link` documentation as to the purpose of this method.
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.adoptedStylesheets = new AdoptedStyleSheets(css`
-      outline-core-alert {
-        ${componentVars}
-      }
-      ${globalStyles}
-    `);
-    this.addController(this.adoptedStylesheets);
-  }
-
   render(): TemplateResult {
     // The `body` wrapper is used to circumvent limitations with styling the `:host` directly, such as applying borders.
     return html`

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

@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@phase2/outline-core": "^0.2.6",
-    "lit": "^2.3.1"
+    "lit": "^3.1.2"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,10 +1,10 @@
-import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { html, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 // Our base component, which all others extend.
 import { OutlineElement } from '@phase2/outline-core';
 
-import componentStyles from './outline-core-breadcrumb.css.lit';
+// import componentStyles from './outline-core-breadcrumb.css.lit';
 
 /** The element name, reused throughout the codebase */
 const componentName = 'outline-core-breadcrumb';
@@ -26,7 +26,7 @@ const componentName = 'outline-core-breadcrumb';
  */
 @customElement(componentName)
 export class OutlineCoreBreadcrumb extends OutlineElement {
-  static styles: CSSResultGroup = [componentStyles];
+  // static styles: CSSResultGroup = [componentStyles];
 
   render(): TemplateResult {
     return html` <slot></slot> `;