chore(deps-dev): bump stylelint-config-standard-scss from 13.1.0 to 16.0.0

.editorconfig

@@ -0,0 +1,27 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+trim_trailing_whitespace = true
+
+# Indentation
+[*.{js,ts,json,yml,yaml,astro}]
+indent_style = space
+indent_size = 2
+
+[*.{scss,css}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab
+

.eslintignore

@@ -0,0 +1,13 @@
+# Dependencies
+node_modules
+
+# Build outputs
+dist
+*.css.map
+
+# Package files
+package-lock.json
+
+# Logs
+*.log
+

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,32 +7,39 @@ assignees: ''
 ---
 
 ## Describe the bug
+
 A clear and concise description of what the bug is.
 
 ## To Reproduce
+
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
 ## Expected behavior
+
 A clear and concise description of what you expected to happen.
 
 ## Screenshots
+
 If applicable, add screenshots to help explain your problem.
 
 ## Environment
+
 - Browser: [e.g. Chrome 120, Safari 17]
 - OS: [e.g. macOS, Windows, iOS]
 - Frostpane version: [e.g. 1.0.0]
 - Framework (if applicable): [e.g. React, Vue, vanilla HTML]
 
 ## Additional context
+
 Add any other context about the problem here.
 
 ## Code Example
+
 ```html
 <!-- Paste your code here -->
 ```
-

.github/ISSUE_TEMPLATE/feature_request.md

@@ -7,22 +7,27 @@ assignees: ''
 ---
 
 ## Is your feature request related to a problem?
+
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 
 ## Describe the solution you'd like
+
 A clear and concise description of what you want to happen.
 
 ## Describe alternatives you've considered
+
 A clear and concise description of any alternative solutions or features you've considered.
 
 ## Use cases
+
 How would this feature be used? What problems does it solve?
 
 ## Additional context
+
 Add any other context, mockups, or screenshots about the feature request here.
 
 ## Example
+
 ```html
 <!-- If applicable, show how you'd like to use this feature -->
 ```
-

.github/PULL_REQUEST_TEMPLATE.md

@@ -17,9 +17,9 @@ Please delete options that are not relevant.
 
 ## Changes Made
 
-- 
-- 
-- 
+-
+-
+-
 
 ## How Has This Been Tested?
 
@@ -44,4 +44,3 @@ Please describe the tests you ran to verify your changes.
 ## Screenshots (if applicable)
 
 Add screenshots to help explain your changes.
-

.github/dependabot.yml

@@ -0,0 +1,48 @@
+version: 2
+updates:
+  # Root workspace dependencies
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+    open-pull-requests-limit: 10
+    groups:
+      development-dependencies:
+        dependency-type: "development"
+        update-types:
+          - "minor"
+          - "patch"
+    commit-message:
+      prefix: "chore"
+      include: "scope"
+
+  # Frostpane library dependencies
+  - package-ecosystem: "npm"
+    directory: "/packages/frostpane"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+    open-pull-requests-limit: 5
+    commit-message:
+      prefix: "chore(lib)"
+
+  # Example site dependencies
+  - package-ecosystem: "npm"
+    directory: "/packages/example"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+    open-pull-requests-limit: 5
+    commit-message:
+      prefix: "chore(example)"
+
+  # GitHub Actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+    commit-message:
+      prefix: "ci"
+

.github/workflows/ci.yml

@@ -25,15 +25,46 @@ jobs:
 
     - name: Install dependencies
       run: npm ci
-
+
+    - name: Run linting
+      run: npm run lint
+
+    - name: Check code formatting
+      run: npm run format:check
+
     - name: Build library
       run: npm run build:lib
-    
+
     - name: Build example site
       run: npm run build:example
-    
+
     - name: Check for build artifacts
       run: |
         test -f packages/frostpane/dist/frostpane.css || exit 1
         test -d packages/example/dist || exit 1
 
+    - name: Check bundle size
+      run: npm run size
+
+    - name: Install Playwright browsers
+      run: npx playwright install --with-deps chromium
+
+    - name: Run tests
+      run: npm test
+
+    - name: Upload test results
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-report-${{ matrix.node-version }}
+        path: playwright-report/
+        retention-days: 30
+
+    - name: Upload test coverage
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: test-coverage-${{ matrix.node-version }}
+        path: playwright-report/
+        retention-days: 30
+

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.nvmrc

@@ -0,0 +1,2 @@
+18
+

.prettierignore

@@ -0,0 +1,22 @@
+# Dependencies
+node_modules
+
+# Build outputs
+dist
+*.css.map
+
+# Package files
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+
+# Logs
+*.log
+
+# OS files
+.DS_Store
+
+# IDE
+.vscode
+.idea
+

.prettierrc.json

@@ -0,0 +1,24 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-astro"],
+  "overrides": [
+    {
+      "files": "*.scss",
+      "options": {
+        "singleQuote": false
+      }
+    },
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

.size-limit.json

@@ -0,0 +1,7 @@
+[
+  {
+    "name": "Frostpane CSS (gzipped)",
+    "path": "packages/frostpane/dist/frostpane.css",
+    "limit": "10 KB"
+  }
+]

.storybook/main.js

@@ -0,0 +1,22 @@
+import { dirname } from 'path';
+
+import { fileURLToPath } from 'url';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}
+
+/** @type { import('@storybook/html-vite').StorybookConfig } */
+const config = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [getAbsolutePath('@storybook/addon-docs')],
+  framework: {
+    name: getAbsolutePath('@storybook/html-vite'),
+    options: {},
+  },
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,33 @@
+/** @type { import('@storybook/html-vite').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: 'gradient',
+      values: [
+        {
+          name: 'gradient',
+          value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        },
+        {
+          name: 'dark',
+          value: '#1a1a1a',
+        },
+        {
+          name: 'light',
+          value: '#f5f5f5',
+        },
+      ],
+    },
+    docs: {
+      toc: true,
+    },
+  },
+};
+
+export default preview;

.stylelintignore

@@ -0,0 +1,10 @@
+# Dependencies
+node_modules
+
+# Build outputs
+dist
+*.css.map
+
+# Compiled CSS (we lint the source SCSS)
+packages/frostpane/dist/frostpane.css
+

.stylelintrc.json

@@ -0,0 +1,38 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "selector-class-pattern": [
+      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*(__[a-z0-9]+(-[a-z0-9]+)*)?(--[a-z0-9]+(-[a-z0-9]+)*)?$",
+      {
+        "message": "Expected class selector to follow BEM naming convention"
+      }
+    ],
+    "custom-property-pattern": [
+      "^fp-[a-z0-9]+(-[a-z0-9]+)*$",
+      {
+        "message": "Expected custom property to follow --fp-* naming convention"
+      }
+    ],
+    "scss/at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": ["use", "forward"]
+      }
+    ],
+    "scss/dollar-variable-pattern": [
+      "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
+      {
+        "message": "Expected variable to be kebab-case"
+      }
+    ],
+    "color-function-notation": "legacy",
+    "alpha-value-notation": "number",
+    "no-descending-specificity": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
+  }
+}