chore(Doc): Updated Getting started Section

- Fixed some typos
- Updated the roadmap and project structure

.gitea/templates/ISSUE_TEMPLATE.md

@@ -0,0 +1,37 @@
+<!-- markdownlint-disable MD041 -->
+## Goal
+
+<!-- One sentence: what should this issue achieve? -->
+
+## Description
+
+<!-- Context and background: why is this issue necessary?
+     What is the current state, and what is missing or needs to be done? -->
+
+## Steps to Reproduce
+
+<!-- Only relevant for bugs — remove this section for tasks/features.
+     1. Go to '...'
+     2. Click on '...'
+     3. See error -->
+
+## Expected Behaviour
+
+<!-- Only relevant for bugs — what should have happened? -->
+
+## Actual Behaviour
+
+<!-- Only relevant for bugs — what happened instead? -->
+
+## Tasks
+
+- [ ] ...
+- [ ] ...
+- [ ] ...
+- [ ] Update the related parts of the documentation
+
+## Acceptance Criteria
+
+- ...
+- ...
+- ...

.gitea/templates/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,34 @@
+<!-- markdownlint-disable MD041 -->
+## Description
+
+<!-- What does this PR change and why? -->
+
+## Related Issue
+
+<!-- Closes #... / Relates to #... -->
+
+## Type of Change
+
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Refactoring (no functional changes)
+- [ ] Documentation
+- [ ] Tests
+
+## Changes
+
+- ...
+- ...
+- ...
+
+## How Has This Been Tested?
+
+<!-- Describe how you verified your changes (unit tests, manual testing, etc.) -->
+
+## Checklist
+
+- [ ] Code follows the project's style guidelines
+- [ ] Self-review of the code has been performed
+- [ ] Tests have been added/updated and pass locally
+- [ ] Documentation has been updated where necessary
+- [ ] No new warnings or errors introduced

.prettierrc.json

@@ -2,5 +2,6 @@
   "singleQuote": true,
   "semi": true,
   "trailingComma": "es5",
-  "printWidth": 100
+  "printWidth": 100,
+    "bracketSameLine": true
 }

README.md

@@ -93,7 +93,6 @@ pnpm install
 | `pnpm run format` | Run the formatter to automatically fix code style issues |
 | `pnpm run test:browser` | Run browser tests (only works inside the `packages/luna-charts` directory) |
 | `pnpm run storybook` | Start the storybook documentation |
-| `pnpm run stencil:dev` | Runs the Stencil development server with live-reloading for the `luna-charts package inside the monorepo. |
 
 Component and browser tests run inside Docker (`docker-compose.test.yaml`), based on the same `Dockerfile.test` used to build the image CI tests against, to guarantee a reproducible browser environment — you don't need Playwright browsers installed locally. Locally this image is built on demand; in CI a prebuilt version of the same image is pulled directly (see [ADR-0002](./docs/src/content/docs/architecture/adr/000200-technology-stack.mdx) and the [Technology Architecture](./docs/src/content/docs/architecture/adm/technology-architecture.mdx#66-test-execution-environment) doc for details).
 

docs/src/content/docs/getting-started/index.mdx

@@ -5,13 +5,22 @@ sidebar:
   order: 0
 ---
 
-LUNA Charts is an open-source charting library built with a strong focus on **accessibility**, **developer experience**, and **long-term maintainability**.
+LUNA Charts is an open-source charting library built with a strong focus on **accessibility**, **developer experience**, and 
+**long-term maintainability**.
 
-The project was created because many existing charting libraries provide excellent visualizations, but often treat accessibility, architecture, and maintainability as secondary concerns.
+The project was created because many existing charting libraries provide excellent visualizations but often 
+treat accessibility as a secondary concern. Furthermore, a lot of teams have a lack of accessibility awareness, 
+and accessibility features are often pushed to the end of the project.
 
 LUNA Charts takes a different approach.
 
-Instead of starting with code, the project started with an **architecture-first process**. The entire foundation—including business goals, technical architecture, governance, and architectural decisions—was designed before implementation began.
+Instead of focusing on becoming a big library with numerous chart-creation functions, this project concentrates 
+on ease of use and chart modification, with accessibility playing a major role throughout the entire development process. 
+LUNA-Charts is open-source software. 
+This guarantees that everyone can use and modify it. We want to make the world more accessible for everyone.
+
+Furthermore, we focus on an **architecture-first process**. The entire foundation—including 
+business goals, technical architecture, governance, and architectural decisions—was designed before implementation began.
 
 ## Project Goals
 
@@ -26,11 +35,9 @@ LUNA Charts aims to provide a charting library that is:
 
 ## Current Project Status
 
-The project is currently in the **Groundwork** phase.
-
-At this stage, the architecture, repository structure, development workflow, and governance model are being established before implementing the first chart components.
-
-Although no production-ready charts are available yet, the project documentation already reflects the long-term vision and architectural direction.
+The project is currently in the **First Proof of Concept (v0.3.0)** phase.
+We validate the core technical and accessibility assumptions of the library through a first working implementation. 
+The goal is to prove that the chosen architecture actually works in practice before committing to a broader component set.
 
 ## Learn More
 

docs/src/content/docs/getting-started/project-structure.mdx

@@ -5,7 +5,8 @@ sidebar:
   order: 1
 ---
 
-LUNA Charts follows a modular repository structure that separates the chart library from its documentation while keeping all project artifacts within a single repository.
+LUNA Charts follows a modular repository structure that separates the chart library from its documentation while keeping 
+all project artifacts within a single repository.
 
 ```text
 luna-charts/
@@ -51,31 +52,38 @@ It serves as the **Single Point of Truth (SPOT)** for:
 - Project governance
 - User documentation
 
-The documentation is rendered using **Starlight**, but the Markdown content remains the authoritative source.
+The documentation is rendered using **Astro and Starlight**, but the Markdown content remains the authoritative source.
 
 ---
 
 ## examples/
 
-Example applications demonstrating how to integrate LUNA Charts with supported frontend frameworks will be added here in future iterations.
+Example applications demonstrating how to integrate LUNA Charts with supported frontend frameworks 
+will be added here in future iterations.
 
 Examples may include:
 
-- Vanilla JavaScript
 - React
 - Angular
 - Vue
 
+Right now, we are working on version 0.3.0, implementing a first proof of concept. 
+The first Minimum Viable Product will be launched with version 1.0.0.
+
 ---
 
+## .gitea/
+
+- Gitea Actions
+- Issue templates
+- Pull request templates
+- Community workflows
+
 ## .github/
 
 Contains project automation such as:
 
-- GitHub Actions
-- Issue templates
-- Pull request templates
-- Community workflows
+- Code of Conduct
 
 ---
 
@@ -83,6 +91,7 @@ Contains project automation such as:
 
 LUNA Charts is maintained as a **pnpm workspace**.
 
-This structure allows multiple packages and supporting projects to evolve together while sharing a consistent toolchain and development workflow.
+This structure allows multiple packages and supporting projects to evolve together while sharing a consistent 
+toolchain and development workflow.
 
 As the project grows, additional packages or tooling may be introduced without changing the overall repository organization.

docs/src/content/docs/getting-started/roadmap.mdx

@@ -7,7 +7,9 @@ sidebar:
 
 LUNA Charts follows an **architecture-first** development approach.
 
-Instead of implementing features immediately, the project establishes a solid architectural and organizational foundation before writing production code. This ensures long-term maintainability, consistent quality, and transparent decision-making.
+Instead of implementing features immediately, the project establishes a solid architectural and organizational 
+foundation before writing production code. This ensures long-term maintainability, consistent quality, and 
+transparent decision-making.
 
 ---
 
@@ -20,7 +22,7 @@ Instead of implementing features immediately, the project establishes a solid ar
 Completed work includes:
 
 - **Repository structure:** Standardized layout for code, configurations, and assets.
-- \*\*Development workflow: Definition of branching strategies, commit rules, and review processes.
+- **Development workflow:** Definition of branching strategies, commit rules, and review processes.
 - **Architecture documentation (TOGAF ADM):** Architecture framework set up according to the TOGAF standard.
 - **Architecture Decision Records (ADRs 1-5):** System established for transparent documentation of architectural decisions.
 - **Project governance:** Defined roles, responsibilities, and decision-making processes.
@@ -102,6 +104,5 @@ Future work may include:
 
 ## Long-Term Vision
 
-LUNA Charts aims to become an accessible, framework-independent charting library that combines modern Web Components with a transparent architecture and a sustainable open-source development model.
-
-Every milestone builds upon the architectural foundation established during the Groundwork phase.
+LUNA Charts aims to become an accessible, framework-independent charting library that combines modern Web Components with a 
+transparent architecture and a sustainable open-source development model.

package.json

@@ -6,7 +6,6 @@
   "scripts": {
     "docs": "pnpm --filter docs run dev",
     "lint": "pnpm --filter luna-charts run lint",
-    "stencil:dev": "pnpm --filter luna-charts exec stencil build --watch",
     "format": "prettier --write .",
     "format:check": "pnpm --filter luna-charts run format:check",
     "changeset": "changeset",

packages/luna-charts/.prettierrc.json

@@ -1,6 +1,7 @@
 {
   "arrowParens": "avoid",
   "bracketSpacing": true,
+  "jsxBracketSameLine": false,
   "jsxSingleQuote": false,
   "quoteProps": "consistent",
   "printWidth": 180,

packages/luna-charts/custom-elements.json

@@ -1,45 +1,94 @@
 {
-  "timestamp": "2026-10-05T16:30:03",
+  "timestamp": "2026-08-01T23:02:04",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.44.2",
+    "version": "4.43.5",
     "typescriptVersion": "5.8.3"
   },
   "components": [
     {
-      "filePath": "src/components/charts/bar-chart/bar-chart.tsx",
+      "filePath": "src/components/my-component/my-component.tsx",
       "encapsulation": "shadow",
-      "tag": "bar-chart",
-      "readme": "# bar-chart\n\n\n",
+      "tag": "my-component",
+      "readme": "# my-component\n\n\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
       "props": [
         {
-          "name": "title",
-          "type": "string",
+          "name": "first",
+          "type": "string | undefined",
           "complexType": {
             "original": "string",
-            "resolved": "string",
+            "resolved": "string | undefined",
             "references": {}
           },
           "mutable": false,
-          "attr": "title",
+          "attr": "first",
           "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "'Hello World'"
-            }
-          ],
-          "default": "'Hello World'",
+          "docs": "The first name",
+          "docsTags": [],
           "values": [
             {
               "type": "string"
+            },
+            {
+              "type": "undefined"
             }
           ],
-          "optional": false,
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "last",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "last",
+          "reflectToAttr": false,
+          "docs": "The last name",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "middle",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "middle",
+          "reflectToAttr": false,
+          "docs": "The middle name",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
@@ -49,12 +98,7 @@
       "events": [],
       "listeners": [],
       "styles": [],
-      "slots": [
-        {
-          "name": "",
-          "docs": "The default slot"
-        }
-      ],
+      "slots": [],
       "parts": [],
       "states": [],
       "dependents": [],
@@ -62,11 +106,5 @@
       "dependencyGraph": {}
     }
   ],
-  "typeLibrary": {
-    "src/types/index.ts::ChartInfo": {
-      "declaration": "export interface ChartInfo {\n  title: string;\n  description: string;  \n  sourceUrl: string;   \n}",
-      "docstring": "",
-      "path": "src/types/index.ts"
-    }
-  }
+  "typeLibrary": {}
 }

packages/luna-charts/src/components.d.ts

@@ -5,46 +5,64 @@
  */
 import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 export namespace Components {
-  interface BarChart {
+  interface MyComponent {
     /**
-     * @default 'Hello World'
+     * The first name
      */
-    title: string;
+    first?: string;
+    /**
+     * The last name
+     */
+    last?: string;
+    /**
+     * The middle name
+     */
+    middle?: string;
   }
 }
 declare global {
-  interface HTMLBarChartElement extends Components.BarChart, HTMLStencilElement {}
-  var HTMLBarChartElement: {
-    prototype: HTMLBarChartElement;
-    new (): HTMLBarChartElement;
+  interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {}
+  var HTMLMyComponentElement: {
+    prototype: HTMLMyComponentElement;
+    new (): HTMLMyComponentElement;
   };
   interface HTMLElementTagNameMap {
-    'bar-chart': HTMLBarChartElement;
+    'my-component': HTMLMyComponentElement;
   }
 }
 declare namespace LocalJSX {
-  interface BarChart {
+  interface MyComponent {
     /**
-     * @default 'Hello World'
+     * The first name
      */
-    title?: string;
+    first?: string;
+    /**
+     * The last name
+     */
+    last?: string;
+    /**
+     * The middle name
+     */
+    middle?: string;
   }
 
-  interface BarChartAttributes {
-    title: string;
+  interface MyComponentAttributes {
+    first: string;
+    middle: string;
+    last: string;
   }
 
   interface IntrinsicElements {
-    'bar-chart': Omit<BarChart, keyof BarChartAttributes> & { [K in keyof BarChart & keyof BarChartAttributes]?: BarChart[K] } & {
-      [K in keyof BarChart & keyof BarChartAttributes as `attr:${K}`]?: BarChartAttributes[K];
-    } & { [K in keyof BarChart & keyof BarChartAttributes as `prop:${K}`]?: BarChart[K] };
+    'my-component': Omit<MyComponent, keyof MyComponentAttributes> & { [K in keyof MyComponent & keyof MyComponentAttributes]?: MyComponent[K] } & {
+      [K in keyof MyComponent & keyof MyComponentAttributes as `attr:${K}`]?: MyComponentAttributes[K];
+    } & { [K in keyof MyComponent & keyof MyComponentAttributes as `prop:${K}`]?: MyComponent[K] };
   }
 }
 export { LocalJSX as JSX };
 declare module '@stencil/core' {
   export namespace JSX {
     interface IntrinsicElements {
-      'bar-chart': LocalJSX.IntrinsicElements['bar-chart'] & JSXBase.HTMLAttributes<HTMLBarChartElement>;
+      'my-component': LocalJSX.IntrinsicElements['my-component'] & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
     }
   }
 }

packages/luna-charts/src/components/charts/bar-chart/bar-chart.css

@@ -1,3 +0,0 @@
-:host {
-  display: block;
-}

packages/luna-charts/src/components/charts/bar-chart/bar-chart.stories.tsx

@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from '@stencil/storybook-plugin';
-import { h } from '@stencil/core';
-import { BarChart } from './bar-chart';
-
-const meta: Meta<BarChart> = {
-  title: 'BarChart',
-  component: BarChart,
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<BarChart>;
-
-export const Primary: Story = {
-  args: {},
-  render: () => <bar-chart title="test" />,
-};
-
-export const Secondary: Story = {
-  args: {},
-};

packages/luna-charts/src/components/charts/bar-chart/bar-chart.tsx

@@ -1,18 +0,0 @@
-import { Component, Host, Prop, h } from '@stencil/core';
-
-@Component({
-  tag: 'bar-chart',
-  styleUrl: 'bar-chart.css',
-  shadow: true,
-})
-export class BarChart {
-  @Prop() title: string = 'Hello World';
-
-  render() {
-    return (
-      <Host>
-        <slot>{this.title}</slot>
-      </Host>
-    );
-  }
-}

packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.e2e.ts

@@ -1,12 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-import { describe, expect, it } from 'vitest';
-
-describe('bar-chart', () => {
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bar-chart></bar-chart>');
-
-    const element = await page.find('bar-chart');
-    expect(element).toHaveClass('hydrated');
-  });
-});

packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.spec.tsx

@@ -1,19 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { BarChart } from '../bar-chart';
-import { describe, expect, it } from 'vitest';
-
-describe('bar-chart', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [BarChart],
-      html: `<bar-chart></bar-chart>`,
-    });
-    expect(page.root).toEqualHtml(`
-      <bar-chart>
-        <mock:shadow-root>
-          <slot></slot>
-        </mock:shadow-root>
-      </bar-chart>
-    `);
-  });
-});

packages/luna-charts/stencil.config.ts

@@ -12,6 +12,9 @@ export const config: Config = {
       customElementsExportBehavior: 'auto-define-custom-elements',
       externalRuntime: false,
     },
+    {
+      type: 'docs-readme',
+    },
     {
       type: 'www',
       serviceWorker: null, // disable service workers