@infineon/design-system 0.0.0-stage → 41.11.0

package/package.json

@@ -1,6 +1,196 @@
 {
   "name": "@infineon/design-system",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "41.11.0",
+  "description": "Infineon Design System - Web Components",
+  "keywords": [
+    "infineon",
+    "design-system",
+    "web-components",
+    "stencil",
+    "ui-components",
+    "component-library"
+  ],
+  "homepage": "https://infineon.github.io/infineon-design-system-stencil/",
+  "bugs": {
+    "url": "https://github.com/Infineon/infineon-design-system-stencil/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Infineon/infineon-design-system-stencil.git",
+    "directory": "packages/components"
+  },
+  "author": "Infineon Technologies AG",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/infineon-design-system-stencil.js",
+      "require": "./dist/cjs/infineon-design-system-stencil.cjs.js"
+    },
+    "./dist/*": {
+      "import": "./dist/*",
+      "types": "./dist/*"
+    },
+    "./loader": {
+      "types": "./dist/loader/index.d.ts",
+      "import": "./dist/loader/index.js",
+      "require": "./dist/loader/index.cjs.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "default": "./dist/components/index.js"
+    },
+    "./components/*": {
+      "default": "./dist/components/*"
+    },
+    "./styles.css": "./dist/infineon-design-system-stencil/infineon-design-system-stencil.css"
+  },
+  "unpkg": "dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "files": [
+    "dist/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@figma/code-connect": "^1.4.2",
+    "@stencil/angular-output-target": "^1.1.1",
+    "@stencil/core": "^4.38.0",
+    "@stencil/react-output-target": "^1.2.0",
+    "@stencil/sass": "^3.2.2",
+    "@stencil/vue-output-target": "^0.11.8",
+    "@storybook/addon-a11y": "^10.0.6",
+    "@storybook/addon-docs": "^10.0.6",
+    "@storybook/web-components-vite": "^10.0.6",
+    "@types/jest": "^29.5.14",
+    "@types/js-beautify": "^1.14.3",
+    "@types/node": "^22.13.5",
+    "glob": "^13.0.6",
+    "jest": "^30.2.0",
+    "jest-cli": "^30.2.0",
+    "jest-stencil-runner": "^0.0.9",
+    "js-beautify": "^1.15.4",
+    "lit": "^3.3.1",
+    "puppeteer": "^24.31.0",
+    "remark-gfm": "^4.0.1",
+    "storybook": "^10.0.6",
+    "typescript": "5.9.3",
+    "vite": "^7.2.4",
+    "workbox-build": "4.3.1"
+  },
+  "dependencies": {
+    "@infineon/design-system-tokens": "^7.1.0",
+    "@infineon/infineon-icons": "4.9.9",
+    "@popperjs/core": "^2.11.8",
+    "ag-grid-community": "^34.3.1",
+    "classnames": "^2.5.1"
+  },
+  "wireit": {
+    "build": {
+      "command": "stencil build",
+      "files": [
+        "src/**",
+        "stencil.config.ts",
+        "tsconfig.json",
+        "package.json",
+        "../../pnpm-lock.yaml"
+      ],
+      "output": [
+        "dist/**",
+        "loader/**",
+        "build-wrapper/**"
+      ]
+    },
+    "build-storybook": {
+      "command": "storybook build",
+      "dependencies": [
+        "build"
+      ],
+      "files": [
+        "src/**",
+        ".storybook/**"
+      ],
+      "output": [
+        "storybook-static/**"
+      ]
+    },
+    "dev:www": {
+      "command": "cross-env BUILD_TARGET=www stencil build --dev --watch",
+      "service": {
+        "readyWhen": {
+          "lineMatches": "build finished"
+        }
+      }
+    },
+    "dev:vue": {
+      "command": "cross-env BUILD_TARGET=vue stencil build --watch",
+      "service": {
+        "readyWhen": {
+          "lineMatches": "build finished"
+        }
+      }
+    },
+    "dev:react": {
+      "command": "cross-env BUILD_TARGET=react stencil build --watch",
+      "service": {
+        "readyWhen": {
+          "lineMatches": "build finished"
+        }
+      }
+    },
+    "dev:angular": {
+      "command": "cross-env BUILD_TARGET=angular stencil build --watch",
+      "service": {
+        "readyWhen": {
+          "lineMatches": "build finished"
+        }
+      }
+    },
+    "dev:html": {
+      "command": "cross-env BUILD_TARGET=html stencil build --watch",
+      "service": {
+        "readyWhen": {
+          "lineMatches": "build finished"
+        }
+      }
+    },
+    "storybook": {
+      "command": "pnpm exec storybook dev -p 6262",
+      "service": true,
+      "dependencies": [
+        {
+          "script": "dev:www",
+          "cascade": false
+        }
+      ]
+    }
+  },
+  "scripts": {
+    "build": "wireit",
+    "dev": "cross-env BUILD_TARGET=www stencil build --dev --watch --serve",
+    "dev:www": "wireit",
+    "dev:angular": "wireit",
+    "dev:react": "wireit",
+    "dev:vue": "wireit",
+    "dev:html": "wireit",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:update": "jest -u",
+    "generate": "stencil generate",
+    "lint": "pnpm run lint:eslint && pnpm run lint:biome",
+    "lint:eslint": "eslint .",
+    "lint:biome": "biome lint .",
+    "lint:fix": "pnpm run lint:eslint:fix && pnpm run lint:biome:fix",
+    "lint:biome:fix": "biome lint --write .",
+    "lint:eslint:fix": "eslint . --fix",
+    "format": "biome format --write .",
+    "check": "biome check --write .",
+    "storybook": "wireit",
+    "build-storybook": "wireit"
+  }
 }

package/readme.md

@@ -0,0 +1,229 @@
+[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsdXN0cmF0b3IgMTkuMi4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0%2BCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDM3My45YzAsMzcuNi01NS4xLDY4LjYtOTIuNyw2OC42SDE4MC40Yy0zNy45LDAtOTIuNy0zMC43LTkyLjctNjguNnYtMy42aDMzNi45VjM3My45eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMjkyLjFIMTgwLjRjLTM3LjYsMC05Mi43LTMxLTkyLjctNjguNnYtMy42SDMzMmMzNy42LDAsOTIuNywzMSw5Mi43LDY4LjZWMjkyLjF6Ii8%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywxNDEuN0g4Ny43di0zLjZjMC0zNy42LDU0LjgtNjguNiw5Mi43LTY4LjZIMzMyYzM3LjksMCw5Mi43LDMwLjcsOTIuNyw2OC42VjE0MS43eiIvPgo8L3N2Zz4K&colorA=16161d&style=flat-square)](https://stenciljs.com)
+[![npm version](https://img.shields.io/npm/v/@infineon/design-system?style=flat-square)](https://www.npmjs.com/package/@infineon/design-system)
+[![npm downloads](https://img.shields.io/npm/dm/@infineon/design-system?style=flat-square)](https://www.npmjs.com/package/@infineon/design-system)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/Infineon/infineon-design-system-stencil/blob/master/LICENSE)
+
+# Infineon Design System
+
+> 45+ production-ready web components built with Stencil. Framework-agnostic components that work everywhere: Vanilla JS, React, Angular, Vue, and more.
+
+**[📚 View Live Storybook](https://infineon.github.io/infineon-design-system-stencil/)** | **[🎯 Example Apps](https://github.com/Infineon/infineon-design-system-stencil/tree/master/examples)** | **[📖 Full Documentation](https://github.com/Infineon/infineon-design-system-stencil)**
+
+## ✨ Features
+
+- ✅ **45+ Production-Ready Components** - Buttons, forms, tables, modals, navigation, and more
+- ✅ **Framework Agnostic** - Works with React, Angular, Vue, or vanilla JavaScript
+- ✅ **TypeScript Support** - Full type definitions included
+- ✅ **Accessible** - WCAG 2.1 compliant components
+- ✅ **Themeable** - Customizable with CSS custom properties
+- ✅ **Tree-Shakeable** - Import only what you need
+- ✅ **CDN Ready** - Use directly from jsDelivr with zero build setup
+
+<details>
+<summary><strong>📦 View All Components</strong></summary>
+
+### Layout & Navigation
+Accordion • Breadcrumb • Footer • Navigation • Tabs • Tree View
+
+### Forms & Input
+Button • Icon Button • Checkbox • Radio Button • Text Field • Textarea • Select • Dropdown • Switch • Slider • Search Bar • Search Field • Date Picker • File Upload
+
+### Data Display
+Table • Advanced Table • Overview Table • Card • Status • Indicator • Progress Bar • Chip • Tooltip
+
+### Feedback & Messaging
+Alert • Modal • Notification • Spinner
+
+### Actions & Controls
+Action List • Content Switcher • Segmented Control • Stepper • Pagination
+
+</details>
+
+## 🚀 Installation
+
+```bash
+npm install @infineon/design-system
+```
+
+## 📖 Usage
+
+### Vanilla JavaScript / HTML
+
+**Option 1: CDN (Easiest)**
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@infineon/design-system"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@infineon/design-system/dist/infineon-design-system-stencil/infineon-design-system-stencil.css">
+</head>
+<body>
+  <ifx-button variant="primary">Click Me</ifx-button>
+  <ifx-switch checked></ifx-switch>
+  <ifx-text-field label="Email" type="email"></ifx-text-field>
+</body>
+</html>
+```
+
+**Option 2: NPM with Bundler (Tree-Shakeable)**
+
+```javascript
+// Import only the components you need
+import '@infineon/design-system/dist/components/ifx-button';
+import '@infineon/design-system/dist/components/ifx-switch';
+```
+
+### React
+
+```bash
+npm install @infineon/design-system-react
+```
+
+```jsx
+import { IfxButton, IfxSwitch } from '@infineon/design-system-react';
+
+function App() {
+  return (
+    <>
+      <IfxButton variant="primary" onIfxClick={() => console.log('clicked')}>
+        Click Me
+      </IfxButton>
+      <IfxSwitch checked />
+    </>
+  );
+}
+```
+
+### Angular
+
+```bash
+npm install @infineon/design-system-angular
+```
+
+```typescript
+// app.module.ts
+import { IfxComponentsModule } from '@infineon/design-system-angular';
+
+@NgModule({
+  imports: [IfxComponentsModule]
+})
+export class AppModule {}
+```
+
+```html
+<!-- app.component.html -->
+<ifx-button variant="primary" (ifxClick)="handleClick()">Click Me</ifx-button>
+<ifx-switch [checked]="true"></ifx-switch>
+```
+
+### Vue
+
+```bash
+npm install @infineon/design-system-vue
+```
+
+```javascript
+// main.js
+import { ComponentLibrary } from '@infineon/design-system-vue';
+
+app.use(ComponentLibrary);
+```
+
+```vue
+<template>
+  <ifx-button variant="primary" @ifxClick="handleClick">Click Me</ifx-button>
+  <ifx-switch :checked="true" />
+</template>
+```
+
+## 🎨 Theming
+
+Customize components using CSS custom properties:
+
+```css
+ifx-button {
+  --ifx-button-primary-background: #006699;
+  --ifx-button-primary-color: #ffffff;
+}
+```
+
+All design tokens are provided by `@infineon/design-system-tokens`.
+
+## 📖 TypeScript Support
+
+Full TypeScript definitions are included:
+
+```typescript
+import type { Components } from '@infineon/design-system';
+
+// Get component interface
+type ButtonProps = Components.IfxButton;
+
+const buttonConfig: Partial<ButtonProps> = {
+  variant: 'primary',
+  disabled: false,
+  size: 'medium'
+};
+```
+
+## 🤝 Contributing
+
+We welcome contributions! Please see the main [Contributing Guide](../../CONTRIBUTING.md) for:
+
+- Development setup
+- Code standards
+- Component creation guidelines
+- Pull request process
+
+## 📄 License
+
+MIT License - see [LICENSE](../../LICENSE) file for details.
+
+## 🔗 Links
+
+- [GitHub Repository](https://github.com/Infineon/infineon-design-system-stencil)
+- [npm Package](https://www.npmjs.com/package/@infineon/design-system)
+- [Storybook Documentation](https://infineon.github.io/infineon-design-system-stencil/)
+- [Issue Tracker](https://github.com/Infineon/infineon-design-system-stencil/issues)
+- [Stencil Documentation](https://stenciljs.com/)
+
+## 📞 Support
+
+- **Email**: dds@infineon.com
+- **Issues**: [GitHub Issues](https://github.com/Infineon/infineon-design-system-stencil/issues)## 📖 TypeScript
+
+Full TypeScript definitions included:
+
+```typescript
+import type { Components } from '@infineon/design-system';
+
+type ButtonProps = Components.IfxButton;
+```
+
+## 📚 Resources
+
+- **[Live Storybook →](https://infineon.github.io/infineon-design-system-stencil/)** - Interactive component playground
+- **[GitHub Repository →](https://github.com/Infineon/infineon-design-system-stencil)** - Source code & documentation
+- **[Example Apps →](https://github.com/Infineon/infineon-design-system-stencil/tree/master/examples)** - React, Angular, Vue examples
+- **[Contributing Guide →](https://github.com/Infineon/infineon-design-system-stencil/blob/master/CONTRIBUTING.md)** - How to contribute
+
+## 🌐 Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## 🤝 Contributing
+
+Contributions welcome! See our [Contributing Guide](https://github.com/Infineon/infineon-design-system-stencil/blob/master/CONTRIBUTING.md).
+
+## 📄 License
+
+MIT - see [LICENSE](https://github.com/Infineon/infineon-design-system-stencil/blob/master/LICENSE)
+
+## 📞 Support
+
+- **Email**: dds@infineon.com
+- **Issues**: [GitHub Issues](https://github.com/Infineon/infineon-design-system-stencil/issues)

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.