@oicl/openbridge-webcomponents 0.0.4

package/dist/svghelpers/circle.js

@@ -0,0 +1,40 @@
+import { svg } from "lit";
+function circle(id, data) {
+  if (data.strokePosition === "center") {
+    return svg`<circle id=${id} cx="0" cy="0" 
+      r=${data.radius} vector-effect="non-scaling-stroke" 
+      stroke=${data.strokeColor}  stroke-width=${data.strokeWidth} 
+      fill=${data.fillColor}>`;
+  } else if (data.strokePosition === "inside") {
+    return svg`
+		<defs>
+			<clipPath id="clip${id}">
+				<circle id=${id} cx="0" cy="0" r=${data.radius} vector-effect="non-scaling-stroke" />
+			</clipPath>
+		</defs>
+		<g>
+			<circle id=${id} cx="0" cy="0" r=${data.radius} vector-effect="non-scaling-stroke" stroke=${data.strokeColor}  stroke-width=${data.strokeWidth * 2} fill=${data.fillColor} clip-path="url(#clip${id})"/>
+		</g>
+  `;
+  } else {
+    return svg`
+		<circle id=${id} cx="0" cy="0" r=${data.radius} vector-effect="non-scaling-stroke" stroke=${data.strokeColor} stroke-width=${data.strokeWidth * 2} fill=${data.fillColor}/>
+		  `;
+  }
+}
+function ringOutside(id, data) {
+  return svg`
+		<defs>
+				<mask id="${id}">
+					<rect x="-50%" y="-50%" width="100%" height="100%" fill="white" />
+					<circle cx="0" cy="0" r=${data.radius} fill="black" />
+				</mask>
+		</defs>
+  		<circle  cx="0" cy="0" r=${data.radius} stroke-width=${data.strokeWidth * 2} fill="none" stroke=${data.strokeColor}  vector-effect="non-scaling-stroke" mask="url(#${id})" />
+	`;
+}
+export {
+  circle,
+  ringOutside
+};
+//# sourceMappingURL=circle.js.map

package/dist/svghelpers/circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle.js","sources":["../../src/svghelpers/circle.ts"],"sourcesContent":["import {svg} from 'lit';\n\nexport function circle(\n  id: string,\n  data: {\n    radius: number;\n    strokeWidth: number;\n    strokeColor: string;\n    strokePosition: 'inside' | 'outside' | 'center';\n    fillColor: string;\n  }\n) {\n  if (data.strokePosition === 'center') {\n    return svg`<circle id=${id} cx=\"0\" cy=\"0\" \n      r=${data.radius} vector-effect=\"non-scaling-stroke\" \n      stroke=${data.strokeColor}  stroke-width=${data.strokeWidth} \n      fill=${data.fillColor}>`;\n  } else if (data.strokePosition === 'inside') {\n    return svg`\n\t\t<defs>\n\t\t\t<clipPath id=\"clip${id}\">\n\t\t\t\t<circle id=${id} cx=\"0\" cy=\"0\" r=${\n          data.radius\n        } vector-effect=\"non-scaling-stroke\" />\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<g>\n\t\t\t<circle id=${id} cx=\"0\" cy=\"0\" r=${\n        data.radius\n      } vector-effect=\"non-scaling-stroke\" stroke=${\n        data.strokeColor\n      }  stroke-width=${data.strokeWidth * 2} fill=${\n        data.fillColor\n      } clip-path=\"url(#clip${id})\"/>\n\t\t</g>\n  `;\n  } else {\n    return svg`\n\t\t<circle id=${id} cx=\"0\" cy=\"0\" r=${\n      data.radius\n    } vector-effect=\"non-scaling-stroke\" stroke=${\n      data.strokeColor\n    } stroke-width=${data.strokeWidth * 2} fill=${data.fillColor}/>\n\t\t  `;\n  }\n}\n\nexport function ringOutside(\n  id: string,\n  data: {radius: number; strokeWidth: number; strokeColor: string}\n) {\n  return svg`\n\t\t<defs>\n\t\t\t\t<mask id=\"${id}\">\n\t\t\t\t\t<rect x=\"-50%\" y=\"-50%\" width=\"100%\" height=\"100%\" fill=\"white\" />\n\t\t\t\t\t<circle cx=\"0\" cy=\"0\" r=${data.radius} fill=\"black\" />\n\t\t\t\t</mask>\n\t\t</defs>\n  \t\t<circle  cx=\"0\" cy=\"0\" r=${data.radius} stroke-width=${\n        data.strokeWidth * 2\n      } fill=\"none\" stroke=${\n        data.strokeColor\n      }  vector-effect=\"non-scaling-stroke\" mask=\"url(#${id})\" />\n\t`;\n}\n"],"names":[],"mappings":";AAEgB,SAAA,OACd,IACA,MAOA;AACI,MAAA,KAAK,mBAAmB,UAAU;AACpC,WAAO,iBAAiB,EAAE;AAAA,UACpB,KAAK,MAAM;AAAA,eACN,KAAK,WAAW,kBAAkB,KAAK,WAAW;AAAA,aACpD,KAAK,SAAS;AAAA,EAAA,WACd,KAAK,mBAAmB,UAAU;AACpC,WAAA;AAAA;AAAA,uBAEY,EAAE;AAAA,iBACR,EAAE,oBACT,KAAK,MACP;AAAA;AAAA;AAAA;AAAA,gBAIQ,EAAE,oBACV,KAAK,MACP,8CACE,KAAK,WACP,kBAAkB,KAAK,cAAc,CAAC,SACpC,KAAK,SACP,wBAAwB,EAAE;AAAA;AAAA;AAAA,EAAA,OAGvB;AACE,WAAA;AAAA,eACI,EAAE,oBACX,KAAK,MACP,8CACE,KAAK,WACP,iBAAiB,KAAK,cAAc,CAAC,SAAS,KAAK,SAAS;AAAA;AAAA,EAE9D;AACF;AAEgB,SAAA,YACd,IACA,MACA;AACO,SAAA;AAAA;AAAA,gBAEO,EAAE;AAAA;AAAA,+BAEa,KAAK,MAAM;AAAA;AAAA;AAAA,+BAGX,KAAK,MAAM,iBAClC,KAAK,cAAc,CACrB,uBACE,KAAK,WACP,mDAAmD,EAAE;AAAA;AAE3D;"}

package/dist/svghelpers/index.d.ts

@@ -0,0 +1,2 @@
+export { circle, ringOutside } from './circle';
+//# sourceMappingURL=index.d.ts.map

package/dist/svghelpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svghelpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC"}

package/dist/svghelpers/index.js

@@ -0,0 +1,6 @@
+import { circle, ringOutside } from "./circle.js";
+export {
+  circle,
+  ringOutside
+};
+//# sourceMappingURL=index.js.map

package/dist/svghelpers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/svghelpers/rectangular.d.ts

@@ -0,0 +1,10 @@
+export declare function rect(id: string, data: {
+    width: number;
+    height: number;
+    strokeWidth: number;
+    strokeColor: string;
+    fillColor: string;
+    borderRadius: number;
+    strokePosition: 'inside' | 'outside';
+}): import("lit-html").TemplateResult<2> | null;
+//# sourceMappingURL=rectangular.d.ts.map

package/dist/svghelpers/rectangular.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rectangular.d.ts","sourceRoot":"","sources":["../../src/svghelpers/rectangular.ts"],"names":[],"mappings":"AAEA,wBAAgB,IAAI,CAClB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,QAAQ,GAAG,SAAS,CAAC;CACtC,+CA0BF"}

package/dist/svghelpers/rectangular.js

@@ -0,0 +1,19 @@
+import { svg } from "lit";
+function rect(id, data) {
+  if (data.strokePosition === "inside") {
+    return svg`
+		<defs>
+			<clipPath id="clip${id}">
+				<rect id=${id} x=${-data.width / 2} y=${-data.height / 2} width=${data.width} height=${data.height} rx=${data.borderRadius} vector-effect="non-scaling-stroke" />
+			</clipPath>
+		</defs>
+		<rect id=${id} x=${-data.width / 2} y=${-data.height / 2} width=${data.width} height=${data.height} rx=${data.borderRadius} vector-effect="non-scaling-stroke" stroke=${data.strokeColor}  stroke-width=${data.strokeWidth * 2} fill=${data.fillColor} clip-path="url(#clip${id})"/>
+		  `;
+  } else {
+    return null;
+  }
+}
+export {
+  rect
+};
+//# sourceMappingURL=rectangular.js.map

package/dist/svghelpers/rectangular.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rectangular.js","sources":["../../src/svghelpers/rectangular.ts"],"sourcesContent":["import {svg} from 'lit';\n\nexport function rect(\n  id: string,\n  data: {\n    width: number;\n    height: number;\n    strokeWidth: number;\n    strokeColor: string;\n    fillColor: string;\n    borderRadius: number;\n    strokePosition: 'inside' | 'outside';\n  }\n) {\n  if (data.strokePosition === 'inside') {\n    return svg`\n\t\t<defs>\n\t\t\t<clipPath id=\"clip${id}\">\n\t\t\t\t<rect id=${id} x=${-data.width / 2} y=${-data.height / 2} width=${\n          data.width\n        } height=${data.height} rx=${\n          data.borderRadius\n        } vector-effect=\"non-scaling-stroke\" />\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<rect id=${id} x=${-data.width / 2} y=${-data.height / 2} width=${\n      data.width\n    } height=${data.height} rx=${\n      data.borderRadius\n    } vector-effect=\"non-scaling-stroke\" stroke=${\n      data.strokeColor\n    }  stroke-width=${data.strokeWidth * 2} fill=${\n      data.fillColor\n    } clip-path=\"url(#clip${id})\"/>\n\t\t  `;\n  } else {\n    return null;\n  }\n}\n"],"names":[],"mappings":";AAEgB,SAAA,KACd,IACA,MASA;AACI,MAAA,KAAK,mBAAmB,UAAU;AAC7B,WAAA;AAAA;AAAA,uBAEY,EAAE;AAAA,eACV,EAAE,MAAM,CAAC,KAAK,QAAQ,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,UAClD,KAAK,KACP,WAAW,KAAK,MAAM,OACpB,KAAK,YACP;AAAA;AAAA;AAAA,aAGK,EAAE,MAAM,CAAC,KAAK,QAAQ,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,UACpD,KAAK,KACP,WAAW,KAAK,MAAM,OACpB,KAAK,YACP,8CACE,KAAK,WACP,kBAAkB,KAAK,cAAc,CAAC,SACpC,KAAK,SACP,wBAAwB,EAAE;AAAA;AAAA,EAAA,OAErB;AACE,WAAA;AAAA,EACT;AACF;"}

package/dist/time.d.ts

@@ -0,0 +1,2 @@
+export declare function renderTime(date: Date): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=time.d.ts.map

package/dist/time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../src/time.ts"],"names":[],"mappings":"AAEA,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,wCAepC"}

package/dist/time.js

@@ -0,0 +1,20 @@
+import { html } from "lit";
+function renderTime(date) {
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+  const hoursString = hours < 10 ? `0${hours}` : `${hours}`;
+  const minutesString = minutes < 10 ? `0${minutes}` : `${minutes}`;
+  const secondsString = seconds < 10 ? `0${seconds}` : `${seconds}`;
+  return html`
+    ${hoursString}<span class="time-divider">:</span> ${minutesString}<span
+      class="time-divider"
+      >:</span
+    >
+    ${secondsString}
+  `;
+}
+export {
+  renderTime
+};
+//# sourceMappingURL=time.js.map

package/dist/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","sources":["../src/time.ts"],"sourcesContent":["import {html} from 'lit';\n\nexport function renderTime(date: Date) {\n  const hours = date.getHours();\n  const minutes = date.getMinutes();\n  const seconds = date.getSeconds();\n  const hoursString = hours < 10 ? `0${hours}` : `${hours}`;\n  const minutesString = minutes < 10 ? `0${minutes}` : `${minutes}`;\n  const secondsString = seconds < 10 ? `0${seconds}` : `${seconds}`;\n\n  return html`\n    ${hoursString}<span class=\"time-divider\">:</span> ${minutesString}<span\n      class=\"time-divider\"\n      >:</span\n    >\n    ${secondsString}\n  `;\n}\n"],"names":[],"mappings":";AAEO,SAAS,WAAW,MAAY;AAC/B,QAAA,QAAQ,KAAK;AACb,QAAA,UAAU,KAAK;AACf,QAAA,UAAU,KAAK;AACrB,QAAM,cAAc,QAAQ,KAAK,IAAI,KAAK,KAAK,GAAG,KAAK;AACvD,QAAM,gBAAgB,UAAU,KAAK,IAAI,OAAO,KAAK,GAAG,OAAO;AAC/D,QAAM,gBAAgB,UAAU,KAAK,IAAI,OAAO,KAAK,GAAG,OAAO;AAExD,SAAA;AAAA,MACH,WAAW,uCAAuC,aAAa;AAAA;AAAA;AAAA;AAAA,MAI/D,aAAa;AAAA;AAEnB;"}

package/dist/types.d.ts

@@ -0,0 +1,11 @@
+export declare enum AlertType {
+    Alarm = "alarm",
+    Warning = "warning",
+    Caution = "caution",
+    Running = "running",
+    Command = "command",
+    Notification = "notification",
+    None = "none",
+    Flat = "flat"
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,IAAI,SAAS;IACb,IAAI,SAAS;CACd"}

package/dist/types.js

@@ -0,0 +1,15 @@
+var AlertType = /* @__PURE__ */ ((AlertType2) => {
+  AlertType2["Alarm"] = "alarm";
+  AlertType2["Warning"] = "warning";
+  AlertType2["Caution"] = "caution";
+  AlertType2["Running"] = "running";
+  AlertType2["Command"] = "command";
+  AlertType2["Notification"] = "notification";
+  AlertType2["None"] = "none";
+  AlertType2["Flat"] = "flat";
+  return AlertType2;
+})(AlertType || {});
+export {
+  AlertType
+};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["export enum AlertType {\n  Alarm = 'alarm',\n  Warning = 'warning',\n  Caution = 'caution',\n  Running = 'running',\n  Command = 'command',\n  Notification = 'notification',\n  None = 'none',\n  Flat = 'flat',\n}\n"],"names":["AlertType"],"mappings":"AAAY,IAAA,8BAAAA,eAAL;AACLA,aAAA,OAAQ,IAAA;AACRA,aAAA,SAAU,IAAA;AACVA,aAAA,SAAU,IAAA;AACVA,aAAA,SAAU,IAAA;AACVA,aAAA,SAAU,IAAA;AACVA,aAAA,cAAe,IAAA;AACfA,aAAA,MAAO,IAAA;AACPA,aAAA,MAAO,IAAA;AARGA,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;"}

package/dist/vite-env.d.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=vite-env.d.js.map

package/dist/vite-env.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-env.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/firebase.json

@@ -0,0 +1,13 @@
+{
+  "hosting": {
+    "site": "openbridge-storybook",
+    "public": "storybook-static",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

package/fix-generated.cjs

@@ -0,0 +1,16 @@
+const fs = require('fs');
+
+function fixIndexFiles() {
+  const indexFiles = [
+    '../openbridge-webcomponents-vue/src/components/table/table.ts',
+  ];
+
+  indexFiles.forEach((indexFile) => {
+    const data = fs.readFileSync(indexFile, 'utf8');
+    // Replace /n with new line
+    const result = data.replace(/\/n/g, '\n');
+    fs.writeFileSync(indexFile, result, 'utf8');
+  });
+}
+
+fixIndexFiles();

package/index.html

@@ -0,0 +1,15 @@
+<!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>
+    <script type="module" src="/src/my-element.ts"></script>
+  </head>
+  <body>
+    <my-element>
+      <h1>Vite + Lit</h1>
+    </my-element>
+  </body>
+</html>

package/new-component.ts

@@ -0,0 +1,102 @@
+import fs from 'fs';
+import path from 'path';
+
+import {question, select, multiselect} from '@topcli/prompts';
+
+const name = await question(
+  'Component name (without obc prefix, and UpperCamelCase) ?',
+  {
+    validators: [
+      {
+        validate: (value) => /^[A-Z][a-zA-Z0-9]+$/.test(value),
+        message: 'Component name must be UpperCamelCase',
+      },
+      {
+        message: 'Component name is required',
+        validate: (value) => !!value,
+      },
+    ],
+  }
+);
+const componentType = await select('Type of component', {
+  choices: ['ui(input, label, tables)', 'instrument (compas, azimuth)'],
+});
+const files = await multiselect('Create files', {
+  choices: ['lit', 'css', 'storybook'],
+  preSelectedChoices: ['lit', 'css', 'storybook'],
+});
+
+// Convert name to kebab-case
+const componentName = name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+const parentDir = componentType[0].includes('ui')
+  ? 'components'
+  : 'navigation-instruments';
+const dir = path.join('src', parentDir, componentName);
+// Create directory
+fs.mkdirSync(dir);
+
+// Create files
+if (files.includes('lit')) {
+  const litFile = path.join(dir, `${componentName}.ts`);
+  const content = `import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+${
+  files.includes('css')
+    ? `import compentStyle from "./${componentName}.style";`
+    : ''
+}
+
+@customElement('obc-${componentName}')
+export class Obc${name} extends LitElement {
+
+  override render() {
+    return html\`
+      <div class="wrapper">
+      </div>
+      \`
+  }
+
+${files.includes('css') ? `static override styles = compentStyle;` : ''}
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-${componentName}': Obc${name}
+  }
+}
+`;
+  fs.writeFileSync(litFile, content);
+}
+
+if (files.includes('css')) {
+  const cssFile = path.join(dir, `${componentName}.css`);
+  const content = ``;
+  fs.writeFileSync(cssFile, content);
+}
+
+if (files.includes('storybook')) {
+  const storybookGroup = await question('Storybook group ');
+  const storybookTitle = await question('Storybook title ');
+  const storybookFile = path.join(dir, `${componentName}.stories.ts`);
+  const content = `import type { Meta, StoryObj } from '@storybook/web-components';
+import { Obc${name} } from './${componentName}';
+import './${componentName}';
+
+const meta: Meta<typeof Obc${name}> = {
+  title: '${storybookGroup}/${storybookTitle}',
+  tags: ['autodocs'],
+  component: "obc-${componentName}",
+  args: {
+  },
+} satisfies Meta<Obc${name}>;
+
+export default meta;
+type Story = StoryObj<Obc${name}>;
+
+export const Primary: Story = {
+  args: {
+  },
+}`;
+  fs.writeFileSync(storybookFile, content);
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@oicl/openbridge-webcomponents",
+  "version": "0.0.4",
+  "type": "module",
+  "scripts": {
+    "build": "yarn run typecheck && yarn run build:ts && yarn run analyze && yarn run build:wrappers",
+    "build:ts": "vite build",
+    "build:ts:watch": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "download:icons": "tsx ./script/download-icons.ts",
+    "download:instruments": "tsx ./script/svg-instruments/main.ts",
+    "new:component": "tsx ./new-component.ts",
+    "test-storybook": "test-storybook",
+    "prepack": "yarn build",
+    "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\"  --write",
+    "format:check": "prettier \"**/*.{cjs,html,js,json,md,ts}\"  --check",
+    "lint": "yarn run lint:lit-analyzer && yarn run lint:eslint",
+    "lint:eslint": "eslint 'src/**/*.ts'",
+    "lint:lit-analyzer": "lit-analyzer",
+    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\"",
+    "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\" --watch",
+    "build:wrappers": "lit labs gen --framework=vue --framework=react --out=.. && node fix-generated.cjs"
+  },
+  "dependencies": {
+    "lit": "^3.1.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.9.0",
+    "@lit-labs/cli": "^0.6.2",
+    "@lit-labs/gen-wrapper-react": "^0.3.1",
+    "@lit-labs/gen-wrapper-vue": "^0.3.2",
+    "@open-wc/lit-helpers": "^0.6.0",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-themes": "^7.6.7",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/test-runner": "^0.16.0",
+    "@storybook/web-components": "^7.6.7",
+    "@storybook/web-components-vite": "^7.6.7",
+    "@topcli/prompts": "^1.8.0",
+    "@types/jest-image-snapshot": "^6",
+    "@types/xmldom": "^0.1.34",
+    "chromatic": "^7.6.0",
+    "concurrently": "^8.2.2",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "figma-api": "^1.11.0",
+    "jest-image-snapshot": "^6.2.0",
+    "lit-analyzer": "^2.0.2",
+    "nodemon": "^3.0.2",
+    "playwright": "^1.40.0",
+    "postcss": "^8.4.32",
+    "postcss-mixins": "^9.0.4",
+    "postcss-nesting": "^12.0.1",
+    "postcss-plugin": "^1.0.0",
+    "prettier": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup-plugin-postcss-lit": "^2.1.0",
+    "storybook": "^7.6.7",
+    "tsx": "^3.14.0",
+    "typescript": "^5.3.3",
+    "vite": "^4.4.5",
+    "vite-plugin-dts": "^3.6.3",
+    "xmldom": "^0.6.0"
+  },
+  "readme": "ERROR: No README data found!",
+  "types": "./dist/index.d.ts",
+  "customElements": "custom-elements.json"
+}

package/postcss-setup.ts

@@ -0,0 +1,135 @@
+import path from 'path';
+import {Plugin} from 'postcss';
+import postCssMixin from 'postcss-mixins';
+import postCssNesting from 'postcss-nesting';
+
+function colors({
+  style,
+  state,
+  psudoClass,
+  className,
+  visibleWrapperClass,
+  otherParameters,
+}: {
+  style: string;
+  state: string;
+  psudoClass?: string;
+  className?: string;
+  visibleWrapperClass?: string;
+  otherParameters?: Record<string, string>;
+}) {
+  let selector = '&';
+  if (psudoClass != null) {
+    selector += `:${psudoClass}`;
+  }
+  if (className) {
+    selector = `${selector}.${className}`;
+  }
+  if (visibleWrapperClass) {
+    selector = `${selector} ${visibleWrapperClass}`;
+  }
+  return {
+    [selector]: {
+      'border-color': `var(--${style}-${state}-border-color)`,
+      'background-color': `var(--${style}-${state}-background-color)`,
+      ...otherParameters,
+    },
+  };
+}
+
+// Split the params by space and equal sign
+// style=primary wrapperClass=wrapperClass => { style: "primary",  wrapperClass: "wrapperClass" }
+function parseParams(params: string): {
+  style: string;
+  visibleWrapperClass?: string;
+} {
+  const paramsArray = params.split(' ');
+  const paramsObject: Record<string, string> = {};
+  paramsArray.forEach((param) => {
+    const [key, value] = param.split('=');
+    if (value === undefined) return;
+    paramsObject[key] = value;
+  });
+  if (!paramsObject.style) {
+    throw new Error('style is required');
+  }
+  return {
+    style: paramsObject.style,
+    visibleWrapperClass: paramsObject.visibleWrapperClass,
+  };
+}
+
+// use mixin @mixin style=normal visibleWrapperClass=.visibleWrapperClass"
+const styleMixin = (data) => {
+  const params = parseParams(data.params);
+
+  let focusVisibleWrapper = '&:focus-visible';
+  if (params.visibleWrapperClass) {
+    focusVisibleWrapper = `${focusVisibleWrapper} ${params.visibleWrapperClass}`;
+  }
+
+  const result = {
+    '&': {
+      cursor: 'pointer',
+    },
+    '&:focus': {
+      outline: 'none',
+    },
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'activated',
+      className: 'activated',
+    }),
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'enabled',
+      otherParameters: {
+        'border-width': '1px',
+        'border-style': 'solid',
+        cursor: 'pointer',
+      },
+    }),
+    [focusVisibleWrapper]: {
+      'outline-color': 'hsla(211, 100%, 44%, 0.3)',
+      'outline-width': '4px',
+      'outline-style': 'solid',
+    },
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'hover',
+      psudoClass: 'hover',
+    }),
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'pressed',
+      psudoClass: 'active',
+    }),
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'disabled',
+      psudoClass: 'disabled',
+      otherParameters: {
+        cursor: 'not-allowed',
+        color: `var(--on-${params.style}-disabled-color)`,
+      },
+    }),
+  };
+  return result;
+};
+
+const currentDir = process.cwd();
+
+export const plugins: Plugin[] = [
+  postCssMixin({
+    mixinsDir: path.join(currentDir, 'src', 'mixins'),
+    mixins: {
+      style: styleMixin,
+    },
+  }),
+  postCssNesting(),
+];