@forjacms/sections 1.2.6

package/dist/types/types.d.ts

@@ -0,0 +1,235 @@
+/**
+ * Section types — mirrors @forjacms/client SectionType.
+ * Duplicated here to avoid a hard dependency on @forjacms/client.
+ */
+export type SectionType = 'Hero' | 'Features' | 'Cta' | 'Gallery' | 'Testimonials' | 'Pricing' | 'Faq' | 'Contact' | 'Custom' | 'Stats' | 'Team' | 'Timeline' | 'LogoCloud' | 'Newsletter' | 'Video' | 'Divider' | 'Text' | 'Portfolio' | 'TagCloud' | 'Projects' | 'Blog' | 'Legal';
+/** Props common to all section components. */
+export interface BaseSectionProps {
+    /** Section heading displayed in an <h2>. Also used as the aria-label fallback for the section landmark. */
+    title?: string;
+    /** Body text rendered below the heading. Supports inline HTML. */
+    text?: string;
+    /** Label for the primary call-to-action button. Button is hidden when omitted. */
+    buttonText?: string;
+    /** URL the primary CTA button links to. Button is hidden when omitted. */
+    buttonHref?: string;
+    /** URL of the section's primary image (hero background, inline illustration, etc.). */
+    imageUrl?: string;
+    /** Alt text for the section image. Falls back to an empty string for decorative images. */
+    imageAlt?: string;
+    /** Arbitrary key-value settings bag passed through from the CMS. Interpretation is component-specific. */
+    settings?: Record<string, unknown>;
+}
+/** Props for the SectionRenderer dispatcher. */
+export interface SectionRendererProps extends BaseSectionProps {
+    /** Discriminator that determines which section component to render. */
+    sectionType: SectionType;
+}
+/** A single feature entry displayed in the Features grid. */
+export interface FeatureItem {
+    /** Feature heading rendered as an <h3>. */
+    title: string;
+    /** Optional description displayed below the feature title. */
+    text?: string;
+    /** Icon string (emoji, ligature name, or SVG markup) rendered with aria-hidden="true". */
+    icon?: string;
+}
+/** A single image entry in the Gallery grid, rendered as a <figure>. */
+export interface GalleryItem {
+    /** URL of the gallery image. Loaded with loading="lazy". */
+    imageUrl: string;
+    /** Alt text for the image. Falls back to empty string for decorative images. */
+    alt?: string;
+    /** Optional caption rendered inside a <figcaption>. */
+    caption?: string;
+}
+/** A single testimonial entry rendered as a <blockquote> with <cite>. */
+export interface TestimonialItem {
+    /** The testimonial text displayed inside the blockquote. */
+    quote: string;
+    /** Author name rendered inside a <cite> element. */
+    author: string;
+    /** Author's role or job title, shown below the name. */
+    role?: string;
+    /** URL of the author's avatar image. Rendered with empty alt (decorative). */
+    avatarUrl?: string;
+}
+/** A pricing plan card rendered in the Pricing section grid. */
+export interface PricingTier {
+    /** Plan name displayed as the card heading (<h3>). */
+    name: string;
+    /** Price string (e.g. "$19", "Free"). Displayed prominently. */
+    price: string;
+    /** Billing period label (e.g. "/month"). Shown next to the price. */
+    period?: string;
+    /** Short plan description rendered below the price. */
+    description?: string;
+    /** List of feature bullet points rendered as a <ul>. */
+    features?: string[];
+    /** When true, applies a visual emphasis modifier class to this tier card. */
+    highlighted?: boolean;
+    /** CTA button label for this tier. Button is hidden when omitted. */
+    buttonText?: string;
+    /** CTA button link for this tier. Button is hidden when omitted. */
+    buttonHref?: string;
+}
+/** A single FAQ entry rendered as a <details>/<summary> accordion item. */
+export interface FaqItem {
+    /** The question text shown in the <summary> toggle. */
+    question: string;
+    /** The answer content revealed when the item is expanded. Supports HTML. */
+    answer: string;
+}
+/** Configuration for a single form field in the Contact section. */
+export interface ContactField {
+    /** HTML name attribute for the input. Also used to generate a unique field id. */
+    name: string;
+    /** Visible label text associated with the input via <label for>. */
+    label: string;
+    /** Input type. "textarea" renders a multi-row <textarea> instead of an <input>. */
+    type: 'text' | 'email' | 'textarea';
+    /** When true, adds the required attribute and aria-required="true" to the input. */
+    required?: boolean;
+    /** Placeholder text shown inside the input when empty. */
+    placeholder?: string;
+}
+/** A single statistic rendered as a <dd>/<dt> pair inside a definition list. */
+export interface StatItem {
+    /** The numeric or textual value (e.g. "99.9%", "10k+"). Rendered in a <dd>. */
+    value: string;
+    /** Descriptive label for the stat (e.g. "Uptime"). Rendered in a <dt>. */
+    label: string;
+}
+/** A single team member card in the Team section grid. */
+export interface TeamMember {
+    /** Member's full name, rendered as an <h3> and used as alt text for their photo. */
+    name: string;
+    /** Job title or role. Visibility controlled by the showRole prop. */
+    role?: string;
+    /** Short biography paragraph. Visibility controlled by the showBio prop. */
+    bio?: string;
+    /** URL of the member's photo. Loaded lazily. */
+    imageUrl?: string;
+}
+/** A single event in the Timeline section, rendered as an <li> in an ordered list. */
+export interface TimelineEvent {
+    /** Date string displayed in a <time> element. Visibility controlled by showDates. */
+    date?: string;
+    /** Event heading rendered as an <h3>. */
+    title: string;
+    /** Event description. Supports HTML. */
+    text?: string;
+}
+/** A single logo entry in the LogoCloud section grid. */
+export interface LogoItem {
+    /** URL of the logo image. Loaded lazily. */
+    imageUrl: string;
+    /** Alt text for the logo image. Required for accessibility. */
+    alt: string;
+    /** Optional link wrapping the logo. Opens in a new tab with rel="noopener". */
+    href?: string;
+}
+/** A work experience entry in the Portfolio section. */
+export interface PortfolioExperience {
+    /** Company or organization name. */
+    company: string;
+    /** Job title or role held. */
+    role: string;
+    /** Time period string (e.g. "2020 – 2023", "Jan 2021 – Present"). */
+    period?: string;
+    /** Description of responsibilities or achievements. Supports HTML. */
+    description?: string;
+    /** Company logo URL. Loaded lazily. */
+    logoUrl?: string;
+}
+/** An education entry in the Portfolio section. */
+export interface EducationItem {
+    /** Educational institution name. */
+    institution: string;
+    /** Degree or certification title. */
+    degree: string;
+    /** Time period string (e.g. "2016 – 2020"). */
+    period?: string;
+    /** Additional details. Supports HTML. */
+    description?: string;
+}
+/** A skill entry in the Portfolio section. */
+export interface SkillItem {
+    /** Skill name (e.g. "TypeScript", "Rust", "Project Management"). */
+    name: string;
+    /** Skill category for grouping (e.g. "Languages", "Frameworks", "Soft Skills"). */
+    category?: string;
+}
+/** A single tag in the TagCloud section. */
+export interface TagItem {
+    /** Tag display label. */
+    label: string;
+    /** Link URL when the tag is clicked. */
+    href?: string;
+    /** Item count displayed next to the label (e.g. "(12)"). */
+    count?: number;
+}
+/** A project card in the Projects section grid. */
+export interface ProjectItem {
+    /** Project name rendered as an <h3>. */
+    title: string;
+    /** Short project description. Supports HTML. */
+    description?: string;
+    /** Cover image URL. Loaded lazily. */
+    imageUrl?: string;
+    /** Link to the project page or repository. */
+    href?: string;
+    /** List of technology or topic tags. */
+    tags?: string[];
+    /** Project status label (e.g. "Active", "Archived", "In Progress"). */
+    status?: string;
+}
+/** A blog post preview in the Blog section grid. */
+export interface BlogPostItem {
+    /** Post title rendered as an <h3>. */
+    title: string;
+    /** Short excerpt or summary text. Supports HTML. */
+    excerpt?: string;
+    /** Cover image URL. Loaded lazily. */
+    imageUrl?: string;
+    /** Link to the full blog post. */
+    href?: string;
+    /** Publication date string displayed in a <time> element. */
+    date?: string;
+    /** Author name. */
+    author?: string;
+}
+/**
+ * Legal document type identifier.
+ * Mirrors LegalDocType from the backend/client.
+ */
+export type LegalDocType = 'CookieConsent' | 'PrivacyPolicy' | 'TermsOfService' | 'Imprint' | 'Disclaimer';
+/** Human-readable labels for legal document types. */
+/** A navigation item for the Nav and Footer components. */
+export interface NavItem {
+    /** Display label for the link. */
+    title: string;
+    /** URL the link points to. */
+    href: string;
+    /** When true, opens in a new tab with rel="noopener noreferrer". */
+    openInNewTab?: boolean;
+    /** Nested child items rendered as a dropdown (Nav only). */
+    children?: NavItem[];
+}
+/** A social media link for the Footer component. */
+export interface SocialLink {
+    /** Platform name (e.g. "GitHub", "Twitter"). */
+    title: string;
+    /** Full URL to the social profile. */
+    url: string;
+    /** Icon slug (e.g. "github", "twitter", "linkedin"). Used to select the SVG icon. */
+    icon: string;
+}
+/** A locale option for the language switcher in the Nav. */
+export interface LocaleOption {
+    /** ISO locale code (e.g. "en", "de", "fr"). */
+    code: string;
+    /** Human-readable locale name (e.g. "English", "Deutsch"). */
+    name: string;
+}
+export declare const LEGAL_DOC_TYPE_LABELS: Record<LegalDocType, string>;

package/dist/types/utils/a11y.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ARIA and accessibility helpers for section components.
+ * These utilities help maintain consistent accessible markup across all sections.
+ */
+/** Build an aria-label from a title, falling back to a generic section description. */
+export declare function sectionLabel(title: string | undefined, fallback: string): string;
+/**
+ * Generate a unique ID for linking headings to their content.
+ * Uses a slug derived from the title, or a random suffix if no title is provided.
+ */
+export declare function sectionId(title: string | undefined, prefix: string): string;

package/dist/types/utils/a11y.unit.d.ts

@@ -0,0 +1 @@
+export {};

package/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,2 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/loader.js';

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@forjacms/sections",
+  "version": "1.2.6",
+  "description": "Framework-agnostic Web Components for rendering Forja page sections. Zero CSS — bring your own styles via BEM class hooks.",
+  "author": "Dominik Dorfstetter <dominik@dorfstetter.at>",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs.js",
+      "types": "./loader/index.d.ts"
+    },
+    "./define": {
+      "import": "./dist/define-all.js",
+      "types": "./dist/define-all.d.ts"
+    }
+  },
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build && node scripts/generate-define-all.js",
+    "dev": "stencil build --dev --watch",
+    "test": "stencil-test",
+    "test:watch": "stencil-test --watch",
+    "test:spec": "stencil-test --project spec",
+    "test:unit": "stencil-test --project unit"
+  },
+  "keywords": [
+    "web-components",
+    "stencil",
+    "sections",
+    "headless",
+    "cms",
+    "forja",
+    "accessible",
+    "custom-elements"
+  ],
+  "license": "AGPL-3.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dominikdorfstetter/forja.git",
+    "directory": "libs/sections"
+  },
+  "homepage": "https://github.com/dominikdorfstetter/forja/tree/main/libs/sections#readme",
+  "bugs": "https://github.com/dominikdorfstetter/forja/issues",
+  "dependencies": {
+    "@stencil/core": "^4.0.0"
+  },
+  "devDependencies": {
+    "@stencil/react-output-target": "^0.7.0",
+    "@stencil/vitest": "^1.9.2",
+    "vitest": "^4.1.2"
+  }
+}