initial commit

Signed-off-by: Mitch Hijlkema <mitch@hijlkema.codes>

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.json

@@ -0,0 +1,42 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
+      "env": {
+        "jest": true
+      },
+      "rules": {}
+    }
+  ]
+}

.prettierignore

@@ -0,0 +1,3 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

.verdaccio/config.yml

@@ -0,0 +1,28 @@
+# path to a directory with all packages
+storage: ../tmp/local-registry/storage
+
+# a list of other known repositories we can talk to
+uplinks:
+  npmjs:
+    url: https://verdaccio.hijlkema.codes/
+    maxage: 60m
+
+packages:
+  '**':
+    # give all users (including non-authenticated users) full access
+    # because it is a local registry
+    access: $all
+    publish: $all
+    unpublish: $all
+
+    # if package is not available locally, proxy requests to npm registry
+    proxy: npmjs
+
+# log settings
+logs:
+  type: stdout
+  format: pretty
+  level: warn
+
+publish:
+  allow_offline: true # set offline to true to allow publish offline

jest.config.ts

@@ -0,0 +1,5 @@
+import { getJestProjects } from '@nx/jest';
+
+export default {
+  projects: getJestProjects(),
+};

jest.preset.js

@@ -0,0 +1,3 @@
+const nxPreset = require('@nx/jest/preset').default;
+
+module.exports = { ...nxPreset };

libs/_internal/styles/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

libs/_internal/styles/README.md

@@ -0,0 +1,11 @@
+# \_internal-styles
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build _internal-styles` to build the library.
+
+## Running unit tests
+
+Run `nx test _internal-styles` to execute the unit tests via [Jest](https://jestjs.io).

libs/_internal/styles/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: '_internal-styles',
+  preset: '../../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../../coverage/libs/_internal/styles',
+};

libs/_internal/styles/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "z-styles",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

libs/_internal/styles/project.json

@@ -0,0 +1,43 @@
+{
+  "name": "_internal-styles",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/_internal/styles/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/_internal/styles",
+        "main": "libs/_internal/styles/src/index.ts",
+        "tsConfig": "libs/_internal/styles/tsconfig.lib.json",
+        "assets": ["libs/_internal/styles/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/_internal/styles/**/*.ts",
+          "libs/_internal/styles/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/_internal/styles/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  },
+  "tags": []
+}

libs/_internal/styles/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/normalize';
+
+export * from './lib/variable.helper';

libs/_internal/styles/src/lib/normalize.ts

@@ -0,0 +1,72 @@
+import { css } from 'lit';
+
+export const normalize = css`
+  blockquote,
+  dl,
+  dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  hr,
+  figure,
+  p,
+  pre {
+    margin: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  *,
+  ::before,
+  ::after {
+    border-width: 0;
+    border-style: solid;
+    border-color: currentColor;
+  }
+
+  i,
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  :host {
+    display: block;
+  }
+`;

libs/_internal/styles/src/lib/variable.helper.ts

@@ -0,0 +1,64 @@
+import { CSSResult, css, unsafeCSS } from 'lit';
+
+export class VariableHelper {
+  private property: string | undefined;
+  private variableName: string | undefined;
+  private groupModifier: string | undefined;
+
+  private defaultValue: string | CSSResult = '/*! */';
+  private isPrivate = false;
+
+  public asPrivate(isPrivate = true) {
+    this.isPrivate = isPrivate;
+    return this;
+  }
+
+  public withDefaultValue(value: string | CSSResult) {
+    this.defaultValue = value;
+    return this;
+  }
+
+  public withProperty(property: string) {
+    this.property = property;
+    return this;
+  }
+
+  public withVariableName(name: string) {
+    this.variableName = name;
+    return this;
+  }
+
+  public withGroupModifier(modifier: string, ...modifiers: string[]) {
+    this.groupModifier = [modifier, ...modifiers].join('--');
+
+    return this;
+  }
+
+  toCss() {
+    if (!this.property) {
+      return css`
+        ${unsafeCSS(this.buildVariableName())}
+      `;
+    }
+
+    return css`
+      ${unsafeCSS(this.property)}: ${unsafeCSS(this.buildVariableName())};
+    `;
+  }
+
+  private buildVariableName() {
+    const variableName = [];
+
+    if (this.groupModifier) {
+      variableName.push(this.groupModifier);
+    }
+
+    if (this.variableName) {
+      variableName.push(this.variableName);
+    }
+
+    return `var(--${this.isPrivate ? '_' : ''}${variableName.join('--')}, ${
+      this.defaultValue
+    })`;
+  }
+}

libs/_internal/styles/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/_internal/styles/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

libs/_internal/styles/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

libs/accordion/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@nx/js/babel",
+      {
+        "useBuiltIns": "usage"
+      }
+    ]
+  ]
+}

libs/accordion/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

libs/accordion/README.md

@@ -0,0 +1,11 @@
+# accordion
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build accordion` to build the library.
+
+## Running unit tests
+
+Run `nx test accordion` to execute the unit tests via [Jest](https://jestjs.io).

libs/accordion/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Lit + TS</title>
+    <!-- the props -->
+    <link rel="stylesheet" href="https://unpkg.com/open-props" />
+
+    <!-- optional imports that use the props -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/open-props/normalize.min.css"
+    />
+    <script type="module" src="/src/lib/accordion.component.ts"></script>
+    <script type="module" src="/src/lib/accordion-group.component.ts"></script>
+  </head>
+  <body>
+    <z-accordion
+      accordion-title="This is lorem ipsum."
+      icon-type="plus-to-cross"
+    >
+      Mollit eu excepteur ex ea magna id nostrud duis aliqua cillum aute. Minim
+      cupidatat cillum aute esse ea culpa proident enim consectetur in ullamco
+      mollit labore id. Ipsum adipisicing esse ex irure ut nostrud adipisicing
+      velit nulla ullamco dolor consequat. Occaecat sint veniam quis aliquip.
+      Aliquip elit commodo labore sit non nostrud dolore aute officia sint
+      cillum ullamco veniam dolore. Et tempor aliquip elit amet adipisicing
+      esse.
+    </z-accordion>
+    <hr />
+    <z-accordion>
+      <h3 slot="header">This is lorem ipsum from a slot.</h3>
+
+      Mollit eu excepteur ex ea magna id nostrud duis aliqua cillum aute. Minim
+      cupidatat cillum aute esse ea culpa proident enim consectetur in ullamco
+      mollit labore id. Ipsum adipisicing esse ex irure ut nostrud adipisicing
+      velit nulla ullamco dolor consequat. Occaecat sint veniam quis aliquip.
+      Aliquip elit commodo labore sit non nostrud dolore aute officia sint
+      cillum ullamco veniam dolore. Et tempor aliquip elit amet adipisicing
+      esse.
+    </z-accordion>
+
+    <hr />
+    <z-accordion.group>
+      <z-accordion
+        accordion-title="This is lorem ipsum."
+        icon-type="plus-to-cross"
+      >
+        Mollit eu excepteur ex ea magna id nostrud duis aliqua cillum aute.
+        Minim cupidatat cillum aute esse ea culpa proident enim consectetur in
+        ullamco mollit labore id. Ipsum adipisicing esse ex irure ut nostrud
+        adipisicing velit nulla ullamco dolor consequat. Occaecat sint veniam
+        quis aliquip. Aliquip elit commodo labore sit non nostrud dolore aute
+        officia sint cillum ullamco veniam dolore. Et tempor aliquip elit amet
+        adipisicing esse.
+      </z-accordion>
+      <hr />
+      <z-accordion>
+        <h3 slot="header">This is lorem ipsum from a slot.</h3>
+
+        Mollit eu excepteur ex ea magna id nostrud duis aliqua cillum aute.
+        Minim cupidatat cillum aute esse ea culpa proident enim consectetur in
+        ullamco mollit labore id. Ipsum adipisicing esse ex irure ut nostrud
+        adipisicing velit nulla ullamco dolor consequat. Occaecat sint veniam
+        quis aliquip. Aliquip elit commodo labore sit non nostrud dolore aute
+        officia sint cillum ullamco veniam dolore. Et tempor aliquip elit amet
+        adipisicing esse.
+      </z-accordion>
+    </z-accordion.group>
+  </body>
+</html>

libs/accordion/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'accordion',
+  preset: '../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/libs/accordion',
+};

libs/accordion/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@hijlkema-codes/z-accordion",
+  "version": "0.0.1",
+  "dependencies": {},
+  "main": "./index.js",
+  "module": "./index.mjs",
+  "typings": "./index.d.ts"
+}

libs/accordion/project.json

@@ -0,0 +1,44 @@
+{
+  "name": "accordion",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/accordion/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/accordion"
+      }
+    },
+    "publish": {
+      "command": "node tools/scripts/publish.mjs accordion {args.ver} {args.tag}",
+      "dependsOn": ["build"]
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/accordion/**/*.ts",
+          "libs/accordion/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/accordion/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  },
+  "tags": ["type:component", ""]
+}

libs/accordion/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/accordion.component';

libs/accordion/src/lib/accordion-group.component.ts

@@ -0,0 +1,33 @@
+import { LitElement, TemplateResult, html } from 'lit';
+import { customElement, queryAssignedElements } from 'lit/decorators.js';
+import AccordionComponent from './accordion.component';
+
+@customElement('z-accordion.group')
+export default class AccordionGroupComponent extends LitElement {
+  @queryAssignedElements({ selector: 'z-accordion' })
+  public items!: NodeListOf<AccordionComponent>;
+
+  protected override firstUpdated() {
+    this.items.forEach((item) => {
+      item.addEventListener('open', () => {
+        this.items.forEach((i) => {
+          if (i !== item) {
+            i.open = false;
+          }
+        });
+      });
+
+      item.addEventListener('close', () => {
+        this.items.forEach((i) => {
+          if (i !== item) {
+            i.open = false;
+          }
+        });
+      });
+    });
+  }
+
+  protected override render(): TemplateResult<1> {
+    return html`<slot></slot>`;
+  }
+}

libs/accordion/src/lib/accordion.component.ts

@@ -0,0 +1,81 @@
+import { normalize } from '@hijlkema-codes/internal/z-styles';
+import { LitElement, TemplateResult, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import {
+  bodyStyles,
+  chevronStyles,
+  headerStyles,
+  hostVariables,
+  plusToCrossStyles,
+  plustoMinusStyles,
+} from './styles';
+
+export const enum Icon {
+  chevronDown = 'chevron-down',
+  plusMinus = 'plus-to-minus',
+  plusCross = 'plus-to-cross',
+  chevronSide = 'chevron-side',
+}
+
+@customElement('z-accordion')
+export default class AccordionComponent extends LitElement {
+  static override get styles() {
+    return [
+      normalize,
+      hostVariables,
+      headerStyles,
+      bodyStyles,
+      chevronStyles,
+      plustoMinusStyles,
+      plusToCrossStyles,
+    ];
+  }
+
+  @property({ attribute: 'accordion-title' })
+  public accordionTitle: string | undefined;
+
+  @property({ reflect: true, type: Boolean })
+  public open = false;
+
+  @property({ attribute: 'icon-type' })
+  public iconType: Icon = Icon.chevronDown;
+
+  protected override render(): TemplateResult<1> {
+    return html`
+      <section>
+        ${this.renderTitle()}
+
+        <div><slot></slot></div>
+      </section>
+    `;
+  }
+
+  protected renderTitle(): TemplateResult<1> {
+    let titleElement = html`<slot name="header"></slot>`;
+    if (this.accordionTitle) {
+      titleElement = html`<h3>${this.accordionTitle}</h3>`;
+    }
+
+    return html` <header @click=${this.toggleOpen}>
+      ${titleElement} ${this.renderChevron()}
+    </header>`;
+  }
+
+  protected renderChevron(): TemplateResult<1> {
+    switch (this.iconType) {
+      case Icon.plusCross:
+        return html`<span class="o-icon__plus-to-cross"></span>`;
+      case Icon.plusMinus:
+        return html`<span class="o-icon__plus-to-minus"></span>`;
+      case Icon.chevronDown:
+      default:
+        return html`<span class="o-icon__chevron-down"></span>`;
+    }
+  }
+
+  private toggleOpen(): void {
+    this.open = !this.open;
+
+    this.dispatchEvent(new Event(this.open ? 'open' : 'close'));
+  }
+}

libs/accordion/src/lib/styles/body.styles.ts

@@ -0,0 +1,13 @@
+import { css } from 'lit';
+
+export const bodyStyles = css`
+  div {
+    padding-inline: var(--_body--padding-inline);
+    padding-block: var(--_body--padding-block);
+    display: none;
+  }
+
+  :host([open]) div {
+    display: block;
+  }
+`;

libs/accordion/src/lib/styles/header.styles.ts

@@ -0,0 +1,142 @@
+import { VariableHelper } from '@hijlkema-codes/internal/z-styles';
+import { css } from 'lit';
+
+const iconColor = new VariableHelper()
+  .withGroupModifier('accordion', 'icon')
+  .withVariableName('color')
+  .withDefaultValue('currentColor')
+  .toCss();
+
+export const headerStyles = css`
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    padding-inline: var(--_padding-inline);
+    border-width: var(--_header--border-width);
+    border-style: solid;
+    border-color: var(--_header--border-color);
+  }
+`;
+
+export const chevronStyles = css`
+  .o-icon__chevron-down {
+    width: 1rem;
+    height: 1rem;
+    display: block;
+    position: relative;
+  }
+
+  .o-icon__chevron-down::before,
+  .o-icon__chevron-down::after {
+    content: '';
+    background-color: ${iconColor};
+    position: absolute;
+    top: 50%;
+    height: 1px;
+    width: 50%;
+    border: 1px solid ${iconColor};
+    transition: transform 0.3s ease-out;
+  }
+
+  .o-icon__chevron-down::before {
+    transform: translateY(-50%)
+      rotate(calc(var(--_rotation-displacement, 1) * 45deg));
+    left: 0;
+  }
+
+  .o-icon__chevron-down::after {
+    transform: translateY(-50%)
+      rotate(calc(var(--_rotation-displacement, 1) * -45deg));
+    right: 0;
+  }
+
+  :host([open]) .o-icon__chevron-down {
+    --_rotation-displacement: -1;
+  }
+
+  :host([open]) .o-icon__chevron-down::before,
+  :host([open]) .o-icon__chevron-down::after {
+    transition-timing-function: ease-in;
+  }
+`;
+
+export const plustoMinusStyles = css`
+  .o-icon__plus-to-minus {
+    width: 1rem;
+    height: 1rem;
+    display: block;
+    position: relative;
+  }
+
+  .o-icon__plus-to-minus::before,
+  .o-icon__plus-to-minus::after {
+    content: '';
+    background-color: ${iconColor};
+    position: absolute;
+    top: 50%;
+    height: 1px;
+    width: 100%;
+    border: 1px solid ${iconColor};
+    transition: transform 0.3s ease-out;
+  }
+
+  .o-icon__plus-to-minus::before {
+    transform: translateY(-50%)
+      rotate(calc(var(--_rotation-displacement, 1) * 90deg));
+  }
+
+  .o-icon__plus-to-minus::after {
+    transform: translateY(-50%);
+  }
+
+  :host([open]) .o-icon__plus-to-minus {
+    --_rotation-displacement: 2;
+  }
+
+  :host([open]) .o-icon__plus-to-minus::before,
+  :host([open]) .o-icon__plus-to-minus::after {
+    transition-timing-function: ease-in;
+  }
+`;
+
+export const plusToCrossStyles = css`
+  .o-icon__plus-to-cross {
+    width: 1rem;
+    height: 1rem;
+    display: block;
+    position: relative;
+  }
+
+  .o-icon__plus-to-cross::before,
+  .o-icon__plus-to-cross::after {
+    content: '';
+    background-color: ${iconColor};
+    position: absolute;
+    top: 50%;
+    height: 1px;
+    width: 100%;
+    border: 1px solid ${iconColor};
+    transition: transform 0.3s ease-out;
+  }
+
+  .o-icon__plus-to-cross::before {
+    transform: translateY(-50%)
+      rotate(calc(var(--_rotation-displacement, 2) * 135deg));
+  }
+
+  .o-icon__plus-to-cross::after {
+    transform: translateY(-50%)
+      rotate(calc(var(--_rotation-displacement, 0) * 45deg));
+  }
+
+  :host([open]) .o-icon__plus-to-cross {
+    --_rotation-displacement: 1;
+  }
+
+  :host([open]) .o-icon__plus-to-cross::before,
+  :host([open]) .o-icon__plus-to-cross::after {
+    transition-timing-function: ease-in;
+  }
+`;

libs/accordion/src/lib/styles/index.ts

@@ -0,0 +1,3 @@
+export * from './body.styles';
+export * from './header.styles';
+export * from './variables.styles';

libs/accordion/src/lib/styles/variables.styles.ts

@@ -0,0 +1,45 @@
+import { VariableHelper } from '@hijlkema-codes/internal/z-styles';
+import { css } from 'lit';
+
+export const hostVariables = css`
+  :host {
+    ${new VariableHelper()
+      .withProperty('--_padding-inline')
+      .withVariableName('padding-inline')
+      .withGroupModifier('accordion')
+      .withDefaultValue('1.25rem')
+      .toCss()}
+
+    ${new VariableHelper()
+      .withProperty('--_header--border-width')
+      .withGroupModifier('accordion', 'header')
+      .withVariableName('border-width')
+      .withDefaultValue('0 0 1px 0')
+      .toCss()}
+
+      ${new VariableHelper()
+      .withProperty('--_header--border-color')
+      .withGroupModifier('accordion', 'header')
+      .withVariableName('border-color')
+      .withDefaultValue('hsl(0, 0, 2%)')
+      .toCss()}
+
+      ${new VariableHelper()
+      .withProperty('--_body--padding-block')
+      .withGroupModifier('accordion', 'body')
+      .withVariableName('padding-block')
+      .withDefaultValue('1rem')
+      .toCss()}
+      ${new VariableHelper()
+      .withProperty('--_body--padding-inline')
+      .withGroupModifier('accordion', 'body')
+      .withVariableName('padding-inline')
+      .withDefaultValue(
+        new VariableHelper()
+          .asPrivate()
+          .withVariableName('padding-inline')
+          .toCss()
+      )
+      .toCss()}
+  }
+`;

libs/accordion/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/accordion/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

libs/accordion/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

libs/accordion/vite.config.ts

@@ -0,0 +1,43 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig({
+  cacheDir: '../../node_modules/.vite/accordion',
+
+  plugins: [
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      skipDiagnostics: true,
+    }),
+
+    nxViteTsPaths(),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'accordion',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: [],
+    },
+  },
+});

nx.json

@@ -4,33 +4,36 @@
     "default": {
       "runner": "nx/tasks-runners/default",
       "options": {
-        "cacheableOperations": [
+        "cacheableOperations": ["build", "lint", "test", "e2e"]
-          "build",
-          "lint",
-          "test",
-          "e2e"
-        ]
       }
     }
   },
   "targetDefaults": {
     "build": {
-      "dependsOn": [
+      "dependsOn": ["^build"],
-        "^build"
+      "inputs": ["production", "^production"]
-      ],
+    },
+    "test": {
+      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"]
+    },
+    "lint": {
       "inputs": [
-        "production",
+        "default",
-        "^production"
+        "{workspaceRoot}/.eslintrc.json",
+        "{workspaceRoot}/.eslintignore"
       ]
     }
   },
   "namedInputs": {
-    "default": [
+    "default": ["{projectRoot}/**/*", "sharedGlobals"],
-      "{projectRoot}/**/*",
-      "sharedGlobals"
-    ],
     "production": [
-      "default"
+      "default",
+      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
+      "!{projectRoot}/tsconfig.spec.json",
+      "!{projectRoot}/.eslintrc.json",
+      "!{projectRoot}/jest.config.[jt]s",
+      "!{projectRoot}/src/test-setup.[jt]s",
+      "!{projectRoot}/test-setup.[jt]s"
     ],
     "sharedGlobals": []
   }

package.json

@@ -2,13 +2,40 @@
   "name": "@z-elements/source",
   "version": "0.0.0",
   "license": "MIT",
-  "scripts": {
+  "scripts": {},
-  },
   "private": true,
   "dependencies": {
+    "lit": "^2.8.0",
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
+    "@nx/eslint-plugin": "16.6.0",
+    "@nx/jest": "16.6.0",
+    "@nx/js": "^16.6.0",
+    "@nx/linter": "16.6.0",
+    "@nx/vite": "^16.6.0",
+    "@nx/web": "^16.6.0",
+    "@nx/workspace": "16.6.0",
+    "@types/jest": "^29.4.0",
+    "@types/node": "18.7.1",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "@vitest/ui": "~0.32.0",
+    "eslint": "~8.15.0",
+    "eslint-config-prettier": "8.1.0",
+    "jest": "^29.4.1",
+    "jest-environment-node": "^29.4.1",
     "nx": "16.6.0",
-    "@nx/workspace": "16.6.0"
+    "prettier": "^2.6.2",
+    "ts-jest": "^29.1.0",
+    "ts-node": "10.9.1",
+    "typescript": "~5.1.3",
+    "verdaccio": "^5.0.4",
+    "vite": "~4.3.9",
+    "vite-plugin-dts": "~2.3.0",
+    "vitest": "~0.32.0"
+  },
+  "nx": {
+    "includedScripts": []
   }
 }

project.json

@@ -0,0 +1,14 @@
+{
+  "name": "@z-elements/source",
+  "$schema": "node_modules/nx/schemas/project-schema.json",
+  "targets": {
+    "local-registry": {
+      "executor": "@nx/js:verdaccio",
+      "options": {
+        "port": 4873,
+        "config": ".verdaccio/config.yml",
+        "storage": "tmp/local-registry/storage"
+      }
+    }
+  }
+}

tools/scripts/publish.mjs

@@ -0,0 +1,60 @@
+/**
+ * This is a minimal script to publish your package to "npm".
+ * This is meant to be used as-is or customize as you see fit.
+ *
+ * This script is executed on "dist/path/to/library" as "cwd" by default.
+ *
+ * You might need to authenticate with NPM before running this script.
+ */
+
+import { execSync } from 'child_process';
+import { readFileSync, writeFileSync } from 'fs';
+
+import devkit from '@nx/devkit';
+const { readCachedProjectGraph } = devkit;
+
+function invariant(condition, message) {
+  if (!condition) {
+    console.error(message);
+    process.exit(1);
+  }
+}
+
+// Executing publish script: node path/to/publish.mjs {name} --version {version} --tag {tag}
+// Default "tag" to "next" so we won't publish the "latest" tag by accident.
+const [, , name, version, tag = 'next'] = process.argv;
+
+// A simple SemVer validation to validate the version
+const validVersion = /^\d+\.\d+\.\d+(-\w+\.\d+)?/;
+invariant(
+  version && validVersion.test(version),
+  `No version provided or version did not match Semantic Versioning, expected: #.#.#-tag.# or #.#.#, got ${version}.`
+);
+
+const graph = readCachedProjectGraph();
+const project = graph.nodes[name];
+
+invariant(
+  project,
+  `Could not find project "${name}" in the workspace. Is the project.json configured correctly?`
+);
+
+const outputPath = project.data?.targets?.build?.options?.outputPath;
+invariant(
+  outputPath,
+  `Could not find "build.options.outputPath" of project "${name}". Is project.json configured  correctly?`
+);
+
+process.chdir(outputPath);
+
+// Updating the version in "package.json" before publishing
+try {
+  const json = JSON.parse(readFileSync(`package.json`).toString());
+  json.version = version;
+  writeFileSync(`package.json`, JSON.stringify(json, null, 2));
+} catch (e) {
+  console.error(`Error reading package.json file from library build output.`);
+}
+
+// Execute "npm publish" to publish
+execSync(`npm publish --access public --tag ${tag}`);

tsconfig.base.json

@@ -0,0 +1,25 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "rootDir": ".",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "esnext",
+    "lib": ["es2020", "dom"],
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@hijlkema-codes/z-accordion": ["libs/accordion/src/index.ts"],
+      "@hijlkema-codes/internal/z-styles": [
+        "libs/_internal/styles/src/index.ts"
+      ]
+    }
+  },
+  "exclude": ["node_modules", "tmp"]
+}