Sync/main from staging

.github/dependabot.yml

@@ -0,0 +1,16 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      # Check for updates to GitHub Actions every week
+      interval: "weekly"

.github/workflows/ci.yml

@@ -12,7 +12,12 @@ on:
   workflow_dispatch:
 
 jobs:
+  update-deps:
+    uses: SolidOS/solidos/.github/workflows/update-solidos-deps.yml@main
+    secrets: inherit
+
   build:
+    needs: update-deps
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -63,7 +68,7 @@ jobs:
         run: gh pr merge --auto --merge "$PR_URL" # Use Github CLI to merge automatically the PR
         env:
           PR_URL: ${{github.event.pull_request.html_url}}
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} 
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
 
   npm-publish-dev:
     needs: build
@@ -88,8 +93,8 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
       - name: Update npm to latest (required for OIDC)
         run: npm install -g npm@latest
-      - name: Disable pre- and post-publish actions
-        run: 'sed -i -E "s/\"((pre|post)publish)/\"ignore:\1/" package.json'
+      - name: Disable publish and install actions
+        run: 'sed -i -E "s/\"((pre|post)(publish|install))/\"ignore:\1/" package.json'
       - name: Publish to npm
         if: github.actor != 'dependabot[bot]' && github.actor != 'dependabot-preview[bot]'
         run: npm publish --tag latest
@@ -109,12 +114,12 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           TAG="v$(node -p 'require("./package.json").version')"
-      
+
           if gh release view "$TAG" >/dev/null 2>&1; then
             echo "Release $TAG already exists. Skipping."
             exit 0
           fi
-      
+
           if git ls-remote --exit-code --tags origin "refs/tags/$TAG" >/dev/null 2>&1; then
             echo "Tag $TAG already exists on origin. Creating release from existing tag."
             gh release create "$TAG" --verify-tag --generate-notes

.gitignore

@@ -1,7 +1,7 @@
 node_modules
 dist
-lib
 src/versionInfo.ts
+src/types/custom-elements.d.ts
 .idea
 .vscode
 coverage

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/web-components-vite'
+import { mergeConfig } from 'vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.ts'],
+  addons: ['@storybook/addon-docs'],
+  framework: '@storybook/web-components-vite',
+
+  async viteFinal (config) {
+    return mergeConfig(config, {
+      resolve: {
+        dedupe: ['lit', 'lit-html', 'lit-element', '@lit/reactive-element'],
+      },
+      optimizeDeps: {
+        include: ['lit/directive-helpers.js'],
+      },
+    })
+  },
+}
+
+export default config

.storybook/preview.ts

@@ -0,0 +1,57 @@
+import { withProvider, getThemeColors } from '@/storybook'
+import { definePreview } from '@storybook/web-components-vite'
+import addonDocs from '@storybook/addon-docs'
+
+import '@/styles/theme.css'
+
+export default definePreview({
+  addons: [addonDocs()],
+  tags: ['autodocs'],
+  decorators: [withProvider],
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Basic UI', 'Advanced', 'Solid'],
+      },
+    },
+    docs: {
+      source: {
+        excludeDecorators: true,
+        transform(code) {
+          const MAX_LINE_LENGTH = 120;
+          const lines = code.trim().split('\n');
+          const formattedLines = lines.map(line => {
+            if (line.length <= MAX_LINE_LENGTH) {
+              return line;
+            }
+
+            const baseIndentMatch = line.match(/^\s*/);
+            const baseIndent = baseIndentMatch ? baseIndentMatch[0] : '';
+            const attrIndent = baseIndent + '  ';
+            const formattedLine = line.replace(/ ([a-z0-9-]+=")/gi, `\n${attrIndent}$1`);
+
+            if (formattedLine !== line) {
+              return formattedLine.replace(/>(<\/[a-z0-9-]+>)$/i, `\n${baseIndent}>$1`);
+            }
+
+            return formattedLine;
+          });
+
+          return formattedLines.filter(line => line.trim() !== '').join('\n');
+        },
+      },
+    },
+  },
+  globalTypes: {
+    primaryColor: {
+      description: 'Primary Color',
+      defaultValue: 'purple',
+      toolbar: {
+        title: 'Primary',
+        icon: 'paintbrush',
+        items: getThemeColors().map((color) => ({ label: color.slice(0, 1).toUpperCase() + color.slice(1), value: color })),
+        dynamicTitle: true,
+      },
+    },
+  },
+});