spoko-design-system 1.20.0 → 1.21.0

package/.claude/settings.json

@@ -1,49 +1,49 @@
-{
-  "includeCoAuthoredBy": false,
-  "permissions": {
-    "allow": [
-      "Bash(pnpm dev:*)",
-      "Bash(pnpm start:*)",
-      "Bash(pnpm build:*)",
-      "Bash(pnpm preview:*)",
-      "Bash(pnpm check:*)",
-      "Bash(pnpm lint:*)",
-      "Bash(pnpm format:*)",
-      "Bash(git status:*)",
-      "Bash(git diff:*)",
-      "Bash(git log:*)",
-      "Bash(git add:*)",
-      "Bash(git commit:*)"
-      "Bash(git push:*)"
-    ],
-    "deny": [
-      "Bash(pnpm semantic-release:*)",
-      "Bash(pnpm publish:*)",
-      "Bash(npm publish:*)",
-    ],
-    "ask": [
-      "Bash(rm:*)",
-      "Bash(pnpm install:*)",
-      "Bash(pnpm add:*)",
-      "Bash(pnpm remove:*)",
-      "Bash(git branch:*)",
-      "Bash(git checkout:*)",
-      "Bash(git merge:*)",
-      "Bash(git rebase:*)"
-    ]
-  },
-  "additionalInstructions": "## Project-Specific Instructions\n\n### Component Development\n- When creating new components, always export them from root `index.ts` (not from `src/`)\n- Use the path pattern: `export { default as Name } from './src/components/Name.vue'`\n- Add documentation page in `src/pages/components/` with `.mdx` extension\n- Update `src/config.ts` SIDEBAR array with navigation entry\n\n### UnoCSS Modifications\n- Never edit root `uno.config.ts` directly (it's just a wrapper)\n- Make theme changes in `uno-config/theme/` files\n- Add shortcuts to appropriate file in `uno-config/theme/shortcuts/`\n- When adding icons, update `icon.config.ts` include array\n\n### Commit Messages\n- This project uses semantic-release with conventional commits\n- Format: `<type>[scope]: <description>`\n- Types: feat (minor), fix (patch), docs (patch), chore (no release)\n- Breaking changes: Add `BREAKING CHANGE:` footer for major version\n- Examples:\n  - `feat(components): add new Modal component`\n  - `fix(Input): resolve floating label z-index issue`\n  - `docs: update Button examples`\n\n### Code Quality\n- Run `pnpm lint:fix` before committing\n- Run `pnpm format` to auto-format code\n- Run `pnpm check` for Astro type checking\n- Ensure components work in both contexts: as npm package and in docs site\n\n### Path Conventions\n- Use TypeScript path aliases: `@components/`, `@utils/`, `@types/`\n- In root `index.ts`, always use `./src/` prefix\n- Within `src/`, use aliases or relative paths\n\n### Testing Changes\n- Start dev server with `pnpm dev` (runs on port 1234)\n- Preview production build with `pnpm preview`\n- Check build output with `pnpm build`",
-  "customInstructions": {
-    "autoApprove": {
-      "patterns": [
-        "*.vue",
-        "*.astro",
-        "*.ts",
-        "*.js",
-        "*.mdx",
-        "src/**/*",
-        "uno-config/**/*"
-      ]
-    }
-  }
+{
+  "includeCoAuthoredBy": false,
+  "permissions": {
+    "allow": [
+      "Bash(pnpm dev:*)",
+      "Bash(pnpm start:*)",
+      "Bash(pnpm build:*)",
+      "Bash(pnpm preview:*)",
+      "Bash(pnpm check:*)",
+      "Bash(pnpm lint:*)",
+      "Bash(pnpm format:*)",
+      "Bash(git status:*)",
+      "Bash(git diff:*)",
+      "Bash(git log:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)"
+      "Bash(git push:*)"
+    ],
+    "deny": [
+      "Bash(pnpm semantic-release:*)",
+      "Bash(pnpm publish:*)",
+      "Bash(npm publish:*)",
+    ],
+    "ask": [
+      "Bash(rm:*)",
+      "Bash(pnpm install:*)",
+      "Bash(pnpm add:*)",
+      "Bash(pnpm remove:*)",
+      "Bash(git branch:*)",
+      "Bash(git checkout:*)",
+      "Bash(git merge:*)",
+      "Bash(git rebase:*)"
+    ]
+  },
+  "additionalInstructions": "## Project-Specific Instructions\n\n### Component Development\n- When creating new components, always export them from root `index.ts` (not from `src/`)\n- Use the path pattern: `export { default as Name } from './src/components/Name.vue'`\n- Add documentation page in `src/pages/components/` with `.mdx` extension\n- Update `src/config.ts` SIDEBAR array with navigation entry\n\n### UnoCSS Modifications\n- Never edit root `uno.config.ts` directly (it's just a wrapper)\n- Make theme changes in `uno-config/theme/` files\n- Add shortcuts to appropriate file in `uno-config/theme/shortcuts/`\n- When adding icons, update `icon.config.ts` include array\n\n### Commit Messages\n- This project uses semantic-release with conventional commits\n- Format: `<type>[scope]: <description>`\n- Types: feat (minor), fix (patch), docs (patch), chore (no release)\n- Breaking changes: Add `BREAKING CHANGE:` footer for major version\n- Examples:\n  - `feat(components): add new Modal component`\n  - `fix(Input): resolve floating label z-index issue`\n  - `docs: update Button examples`\n\n### Code Quality\n- Run `pnpm lint:fix` before committing\n- Run `pnpm format` to auto-format code\n- Run `pnpm check` for Astro type checking\n- Ensure components work in both contexts: as npm package and in docs site\n\n### Path Conventions\n- Use TypeScript path aliases: `@components/`, `@utils/`, `@types/`\n- In root `index.ts`, always use `./src/` prefix\n- Within `src/`, use aliases or relative paths\n\n### Testing Changes\n- Start dev server with `pnpm dev` (runs on port 1234)\n- Preview production build with `pnpm preview`\n- Check build output with `pnpm build`",
+  "customInstructions": {
+    "autoApprove": {
+      "patterns": [
+        "*.vue",
+        "*.astro",
+        "*.ts",
+        "*.js",
+        "*.mdx",
+        "src/**/*",
+        "uno-config/**/*"
+      ]
+    }
+  }
 }

package/.github/dependabot.yml

@@ -1,11 +1,11 @@
-# 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: "" # See documentation for possible values
-    directory: "/" # Location of package manifests
-    schedule:
-      interval: "weekly"
+# 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: "" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

package/.github/todo.yml

@@ -1,3 +1,3 @@
-              - name: todo-issue
-                uses: DerJuulsn/todo-issue@v1.1.4
-            
+              - name: todo-issue
+                uses: DerJuulsn/todo-issue@v1.1.4
+            

package/.github/workflows/claude.yml

@@ -1,37 +1,37 @@
-name: Claude Code
-
-on:
-  issue_comment:
-    types: [created]
-  pull_request_review_comment:
-    types: [created]
-  issues:
-    types: [opened, assigned]
-  pull_request_review:
-    types: [submitted]
-
-jobs:
-  claude:
-    if: |
-      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
-      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
-      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
-      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: write
-      issues: write
-      id-token: write
-      actions: read
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Run Claude Code
-        id: claude
-        uses: anthropics/claude-code-action@v1
-        with:
-          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+      id-token: write
+      actions: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@v1
+        with:
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}

package/.github/workflows/code-quality.yml

@@ -1,72 +1,72 @@
-name: Code Quality & Analysis
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  lint-and-format:
-    name: Lint and Format Check
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v5
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10.17.1
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v5
-        with:
-          node-version: '22'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Check Prettier formatting
-        run: pnpm run format:check
-
-      - name: Run ESLint
-        run: pnpm run lint
-
-      - name: Type check
-        run: pnpm run check
-
-  sonarcloud:
-    name: SonarCloud Analysis
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v5
-        with:
-          fetch-depth: 0  # Shallow clones should be disabled for better analysis
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10.17.1
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v5
-        with:
-          node-version: '22'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build project
-        run: pnpm run build
-
-      - name: SonarCloud Scan
-        uses: SonarSource/sonarcloud-github-action@master
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
-          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+name: Code Quality & Analysis
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  lint-and-format:
+    name: Lint and Format Check
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.17.1
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '22'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Check Prettier formatting
+        run: pnpm run format:check
+
+      - name: Run ESLint
+        run: pnpm run lint
+
+      - name: Type check
+        run: pnpm run check
+
+  sonarcloud:
+    name: SonarCloud Analysis
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0  # Shallow clones should be disabled for better analysis
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.17.1
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '22'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project
+        run: pnpm run build
+
+      - name: SonarCloud Scan
+        uses: SonarSource/sonarcloud-github-action@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

package/.github/workflows/deploy.yml

@@ -1,44 +1,44 @@
-name: Deploy to GitHub Pages
-
-on:
-  # Trigger the workflow every time you push to the `main` branch
-  # Using a different branch name? Replace `main` with your branch's name
-  push:
-    branches: [ main ]
-  # Allows you to run this workflow manually from the Actions tab on GitHub.
-  workflow_dispatch:
-
-# Prevent concurrent deployments
-concurrency:
-  group: pages
-  cancel-in-progress: false
-
-# Allow this job to clone the repo and create a page deployment
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout your repository using git
-        uses: actions/checkout@v5
-      - name: Install, build, and upload your site
-        uses: withastro/action@v4
-        with:
-          package-manager: pnpm@10.17.1
-          # path: . # The root location of your Astro project inside the repository. (optional)
-          # node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
-
-  deploy:
-    needs: build
-    runs-on: ubuntu-latest
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
+name: Deploy to GitHub Pages
+
+on:
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch's name
+  push:
+    branches: [ main ]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Prevent concurrent deployments
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v5
+      - name: Install, build, and upload your site
+        uses: withastro/action@v4
+        with:
+          package-manager: pnpm@10.17.1
+          # path: . # The root location of your Astro project inside the repository. (optional)
+          # node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
         uses: actions/deploy-pages@v4

package/.husky/README.md

@@ -1,41 +1,41 @@
-# Git Hooks with Husky
-
-This directory contains Git hooks managed by [Husky](https://typicode.github.io/husky/).
-
-## Pre-commit Hook
-
-The pre-commit hook automatically runs before each commit to ensure code quality:
-
-1. **Builds the project** (`pnpm run build`)
-   - Catches MDX syntax errors
-   - Validates Vue components
-   - Ensures all documentation examples work
-
-If the build fails, the commit will be blocked until errors are fixed.
-
-## Setup for Team Members
-
-Hooks are automatically installed when running:
-
-```bash
-pnpm install
-```
-
-The `prepare` script in `package.json` handles this automatically.
-
-## Benefits
-
-✅ Prevents broken builds from being committed
-✅ Catches errors early in development
-✅ Maintains code quality across the team
-✅ Reduces failed CI/CD builds
-
-## Bypassing Hooks (Emergency Only)
-
-If you absolutely need to bypass the pre-commit hook:
-
-```bash
-git commit --no-verify -m "your message"
-```
-
-**Note:** Only use this in emergencies. Your commit may break the build.
+# Git Hooks with Husky
+
+This directory contains Git hooks managed by [Husky](https://typicode.github.io/husky/).
+
+## Pre-commit Hook
+
+The pre-commit hook automatically runs before each commit to ensure code quality:
+
+1. **Builds the project** (`pnpm run build`)
+   - Catches MDX syntax errors
+   - Validates Vue components
+   - Ensures all documentation examples work
+
+If the build fails, the commit will be blocked until errors are fixed.
+
+## Setup for Team Members
+
+Hooks are automatically installed when running:
+
+```bash
+pnpm install
+```
+
+The `prepare` script in `package.json` handles this automatically.
+
+## Benefits
+
+✅ Prevents broken builds from being committed
+✅ Catches errors early in development
+✅ Maintains code quality across the team
+✅ Reduces failed CI/CD builds
+
+## Bypassing Hooks (Emergency Only)
+
+If you absolutely need to bypass the pre-commit hook:
+
+```bash
+git commit --no-verify -m "your message"
+```
+
+**Note:** Only use this in emergencies. Your commit may break the build.

package/.husky/commit-msg

@@ -1 +1 @@
-pnpm exec commitlint --edit $1
+pnpm exec commitlint --edit $1

package/.husky/pre-commit

@@ -1,40 +1,40 @@
-echo "🔍 Running pre-commit checks..."
-
-# Check for merge conflict markers
-if ! git diff --cached --check; then
-  echo "❌ Found merge conflict markers!"
-  exit 1
-fi
-
-# Check for console.log (optional warning)
-if git diff --cached --name-only | xargs grep -n "console\\.log" 2>/dev/null; then
-  echo "⚠️  Warning: Found console.log statements"
-  echo "   Consider removing them before committing to production"
-fi
-
-# Run format check
-echo "🎨 Checking code formatting..."
-pnpm run format:check
-if [ $? -ne 0 ]; then
-  echo "❌ Format check failed! Run 'pnpm run format' to fix."
-  exit 1
-fi
-
-# Run linting
-echo "🔍 Running linter..."
-pnpm run lint
-if [ $? -ne 0 ]; then
-  echo "❌ Lint check failed! Run 'pnpm run lint:fix' to fix."
-  exit 1
-fi
-
-# Run Astro build to catch MDX and component errors
-echo "🏗️  Building project..."
-pnpm run build
-
-if [ $? -eq 0 ]; then
-  echo "✅ All checks passed! Proceeding with commit..."
-else
-  echo "❌ Build failed! Please fix errors before committing."
-  exit 1
-fi
+echo "🔍 Running pre-commit checks..."
+
+# Check for merge conflict markers
+if ! git diff --cached --check; then
+  echo "❌ Found merge conflict markers!"
+  exit 1
+fi
+
+# Check for console.log (optional warning)
+if git diff --cached --name-only | xargs grep -n "console\\.log" 2>/dev/null; then
+  echo "⚠️  Warning: Found console.log statements"
+  echo "   Consider removing them before committing to production"
+fi
+
+# Run format check
+echo "🎨 Checking code formatting..."
+pnpm run format:check
+if [ $? -ne 0 ]; then
+  echo "❌ Format check failed! Run 'pnpm run format' to fix."
+  exit 1
+fi
+
+# Run linting
+echo "🔍 Running linter..."
+pnpm run lint
+if [ $? -ne 0 ]; then
+  echo "❌ Lint check failed! Run 'pnpm run lint:fix' to fix."
+  exit 1
+fi
+
+# Run Astro build to catch MDX and component errors
+echo "🏗️  Building project..."
+pnpm run build
+
+if [ $? -eq 0 ]; then
+  echo "✅ All checks passed! Proceeding with commit..."
+else
+  echo "❌ Build failed! Please fix errors before committing."
+  exit 1
+fi

package/.prettierignore

@@ -1,15 +1,15 @@
-node_modules/
-dist/
-.astro/
-pnpm-lock.yaml
-*.md
-*.svg
-*.png
-*.jpg
-*.jpeg
-*.gif
-*.ico
-*.woff
-*.woff2
-*.ttf
+node_modules/
+dist/
+.astro/
+pnpm-lock.yaml
+*.md
+*.svg
+*.png
+*.jpg
+*.jpeg
+*.gif
+*.ico
+*.woff
+*.woff2
+*.ttf
 *.eot