@sociallane/elements 1.0.0

package/packages/widgets/cta-split/data/view.php

@@ -0,0 +1,84 @@
+<?php
+/**
+ * Data Preparation: CTA Split
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for CTA Split widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID
+ * @return array Template-ready data
+ */
+function prepare_cta_split_view( array $settings, string $widget_id ): array {
+	$fields       = sociallane_extract_fields( $settings, [ 'headline' => [], 'description' => [] ] );
+	$headline_tag = sociallane_validate_heading_tag( $settings, 'headline_tag', 'h2' );
+	$show_phone   = sociallane_show_field( $settings, 'show_phone' );
+	$show_email   = sociallane_show_field( $settings, 'show_email' );
+
+	$image = sociallane_prepare_image_data(
+		$settings['image'] ?? [],
+		[
+			'alt'        => $settings['image_alt'] ?? '',
+			'sizes'      => '(min-width: 1024px) 50vw, 100vw',
+			'loading'    => 'lazy',
+			'image_size' => 'large',
+		]
+	);
+
+	$image_aspect_ratio = '';
+	if ( ! empty( $image['width'] ) && ! empty( $image['height'] ) && (int) $image['height'] > 0 ) {
+		$image_aspect_ratio = (int) $image['width'] . ' / ' . (int) $image['height'];
+	}
+
+	$phone_raw = $show_phone ? trim( (string) ( $settings['phone'] ?? '' ) ) : '';
+	$phone_url = $settings['phone_url']['url'] ?? '';
+	if ( $phone_raw && ! $phone_url ) {
+		$phone_url = 'tel:' . preg_replace( '/\s+/', '', $phone_raw );
+	}
+	$phone = $phone_raw ? [
+		'label' => esc_html( $phone_raw ),
+		'url'   => esc_url( $phone_url ?: 'tel:' . preg_replace( '/\s+/', '', $phone_raw ) ),
+	] : null;
+
+	$email_raw = $show_email ? trim( $settings['email'] ?? '' ) : '';
+	$email     = $email_raw ? [
+		'label' => esc_html( $email_raw ),
+		'url'   => 'mailto:' . sanitize_email( $email_raw ),
+	] : null;
+
+	$min_height = $settings['min_height'] ?? '60vh';
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true ] );
+
+	// Dark slate left panel (#2E3E4C), white headline, lighter grey description, teal contact (#34D399)
+	$classes = [
+		'panel'       => 'bg-zinc-700 dark:bg-zinc-800',
+		'headline'    => 'text-white dark:text-white',
+		'description' => 'text-white/90 dark:text-neutral-200',
+		'contact'     => 'text-emerald-400 dark:text-emerald-400',
+		'icon'        => 'text-emerald-400 dark:text-emerald-400 shrink-0',
+		'separator'   => 'text-white/50 dark:text-neutral-400',
+		'focus_ring'  => 'focus:ring-emerald-400 focus:ring-offset-2 focus:ring-offset-blue-chill-900 dark:focus:ring-offset-blue-chill-950',
+	];
+
+	return array_merge( $fields, [
+		'show_phone'   => $show_phone,
+		'show_email'   => $show_email,
+		'headline_tag' => $headline_tag,
+		'image'        => $image,
+		'image_aspect_ratio' => $image_aspect_ratio,
+		'phone'        => $phone,
+		'email'        => $email,
+		'min_height'   => $min_height,
+		'classes'      => $classes,
+		'widget_id'    => $widget_id,
+		'animation'    => $animation,
+	] );
+}

package/packages/widgets/cta-split/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@sociallane/widget-cta-split",
+  "version": "1.0.0",
+  "private": true,
+  "description": "SocialLane Elements widget: cta-split",
+  "peerDependencies": {
+    "@sociallane/core": "^1.0.0"
+  },
+  "scripts": {
+    "build": "echo \"No widget-specific build\""
+  }
+}

package/packages/widgets/cta-split/templates/wrapper.php

@@ -0,0 +1,113 @@
+<?php
+/**
+ * Template: CTA Split Wrapper
+ *
+ * Two columns: left = dark panel (headline, description, phone | email);
+ * right = full-height image. No overlay. Teal contact.
+ *
+ * AVAILABLE DATA ($view): show_headline, show_description, show_phone, show_email,
+ * headline, headline_tag, description, image, image_aspect_ratio, phone, email,
+ * min_height, classes, widget_id, animation
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) ) {
+	return;
+}
+
+$anim           = $view['animation'] ?? [];
+$section_attrs  = sociallane_section_animation_attrs( $anim );
+$headline_attrs = sociallane_headline_animation_attrs( $anim );
+$section_id     = 'cta-split-' . $view['widget_id'];
+$elements_path  = SOCIALLANE_ELEMENTS_PATH . 'elements';
+
+$has_headline    = $view['show_headline'] && $view['headline'] !== '';
+$has_description = $view['show_description'] && $view['description'] !== '';
+$has_contact     = ! empty( $view['phone'] ) || ! empty( $view['email'] );
+$has_heading     = $has_headline || $has_description;
+$has_image       = ! empty( $view['image']['src'] );
+?>
+
+<?php // ========== CTA SPLIT START ========== ?>
+
+<section
+	class="cta-split mx-auto flex flex-col justify-center items-stretch lg:flex-row lg:px-24 min-h-0 overflow-hidden"
+	style="min-height: <?php echo esc_attr( $view['min_height'] ); ?>;"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	<?php if ( $has_heading ) : ?>aria-labelledby="<?php echo esc_attr( $section_id ); ?>"<?php endif; ?>
+>
+	<?php /* Left: dark panel – content stretches to match image height */ ?>
+	<div class="flex flex-col justify-center lg:flex-1 lg:min-h-0 <?php echo esc_attr( $view['classes']['panel'] ); ?> py-14 px-6 sm:py-16 sm:px-8 lg:py-20 lg:px-12 xl:px-16 order-1">
+		<div class="max-w-xl w-full h-auto">
+			<header class="mb-0" id="<?php echo esc_attr( $section_id ); ?>">
+				<?php if ( $has_headline ) : ?>
+					<<?php echo $view['headline_tag']; ?>
+						class="<?php echo esc_attr( $view['classes']['headline'] ); ?> text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold font-heading leading-tight"
+						<?php echo $headline_attrs ? ' ' . $headline_attrs : ''; ?>
+					>
+						<?php echo $view['headline']; ?>
+					</<?php echo $view['headline_tag']; ?>>
+				<?php endif; ?>
+				<?php if ( $has_description ) : ?>
+					<p class="<?php echo esc_attr( $view['classes']['description'] ); ?> mt-6 md:mt-8 text-base md:text-lg leading-relaxed">
+						<?php echo $view['description']; ?>
+					</p>
+				<?php endif; ?>
+			</header>
+
+			<?php /* Contact: phone | email – left-aligned, teal icon + text */ ?>
+			<?php if ( $has_contact ) : ?>
+				<div class="flex flex-wrap items-center gap-x-4 gap-y-2 mt-8 md:mt-10 text-base md:text-lg">
+					<?php if ( ! empty( $view['phone'] ) ) : ?>
+						<a
+							href="<?php echo esc_url( $view['phone']['url'] ); ?>"
+							class="<?php echo esc_attr( $view['classes']['contact'] ); ?> inline-flex items-center gap-2 hover:opacity-90 focus:outline-none focus:ring-2 <?php echo esc_attr( $view['classes']['focus_ring'] ); ?> rounded transition-opacity"
+							aria-label="<?php echo esc_attr( sprintf( /* translators: phone number */ __( 'Call %s', 'sociallane-elements' ), $view['phone']['label'] ) ); ?>"
+						>
+							<svg class="w-5 h-5 <?php echo esc_attr( $view['classes']['icon'] ); ?>" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+								<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
+							</svg>
+							<span><?php echo $view['phone']['label']; ?></span>
+						</a>
+					<?php endif; ?>
+
+					<?php if ( ! empty( $view['phone'] ) && ! empty( $view['email'] ) ) : ?>
+						<span class="<?php echo esc_attr( $view['classes']['separator'] ); ?> hidden sm:inline" aria-hidden="true">|</span>
+					<?php endif; ?>
+
+					<?php if ( ! empty( $view['email'] ) ) : ?>
+						<a
+							href="<?php echo esc_url( $view['email']['url'] ); ?>"
+							class="<?php echo esc_attr( $view['classes']['contact'] ); ?> inline-flex items-center gap-2 hover:opacity-90 focus:outline-none focus:ring-2 <?php echo esc_attr( $view['classes']['focus_ring'] ); ?> rounded transition-opacity"
+							aria-label="<?php echo esc_attr( sprintf( /* translators: email address */ __( 'Email %s', 'sociallane-elements' ), $view['email']['label'] ) ); ?>"
+						>
+							<svg class="w-5 h-5 <?php echo esc_attr( $view['classes']['icon'] ); ?>" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+								<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
+								<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
+							</svg>
+							<span><?php echo $view['email']['label']; ?></span>
+						</a>
+					<?php endif; ?>
+				</div>
+			<?php endif; ?>
+		</div>
+	</div>
+
+	<?php /* Right: image – height driven by aspect-ratio when available, content panel stretches to match */ ?>
+	<?php if ( $has_image ) : ?>
+		<div class="relative flex-1 min-h-[280px] sm:min-h-[360px] lg:min-h-0 order-2 bg-neutral-200 dark:bg-neutral-800"<?php echo ! empty( $view['image_aspect_ratio'] ) ? ' style="aspect-ratio: ' . esc_attr( $view['image_aspect_ratio'] ) . ';"' : ''; ?>>
+			<?php
+			$image          = $view['image'];
+			$image['class'] = 'w-full h-full object-cover';
+			include $elements_path . '/image/templates/render.php';
+			?>
+		</div>
+	<?php endif; ?>
+</section>
+
+<?php // ========== CTA SPLIT END ========== ?>

package/packages/widgets/faq-centered/data/view.php

@@ -0,0 +1,87 @@
+<?php
+/**
+ * Data Preparation: FAQ
+ *
+ * Transforms raw Elementor settings into clean, template-ready data.
+ * All sanitization and defaults happen here.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for FAQ widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID for accessibility
+ * @return array Template-ready data
+ */
+function prepare_faq_centered_view( array $settings, string $widget_id ): array {
+	$fields     = sociallane_extract_fields( $settings, [
+		'title'       => [ 'show_key' => 'show_title' ],
+		'description' => [ 'show_key' => 'show_description', 'sanitize' => 'wp_kses_post' ],
+	] );
+	$title_tag  = sociallane_validate_heading_tag( $settings, 'title_tag', 'h2' );
+	$first_open = ( $settings['first_open'] ?? 'yes' ) === 'yes';
+
+	$displayed_index = 0;
+	$items = sociallane_process_repeater( $settings['faq_items'] ?? [], function ( $row, $index ) use ( $widget_id, $first_open, &$displayed_index ) {
+		$q = trim( $row['question'] ?? '' );
+		$a = (string) ( $row['answer'] ?? '' );
+		if ( $q === '' && $a === '' ) {
+			return null;
+		}
+		$btn_label = trim( $row['button_label'] ?? '' );
+		$btn_url   = is_array( $row['button_url'] ?? null ) ? $row['button_url'] : [];
+		$button    = ( $btn_label !== '' && function_exists( 'sociallane_prepare_button_data' ) )
+			? sociallane_prepare_button_data( $btn_label, $btn_url, [ 'preset' => 'primary' ] )
+			: null;
+		$is_first = $displayed_index === 0;
+		$displayed_index++;
+		return [
+			'id'       => 'faq-' . $widget_id . '-' . $index,
+			'question' => esc_html( $q ),
+			'answer'   => wp_kses_post( $a ),
+			'open'     => $first_open && $is_first,
+			'button'   => $button,
+		];
+	} );
+
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
+
+	// Light/dark mode classes (all color/theme here — templates only echo these)
+	$classes = [
+		'section'      => 'bg-neutral-100 dark:bg-zinc-900',
+		'title'        => 'text-zinc-900 dark:text-neutral-200',
+		'description'  => 'text-zinc-900 dark:text-neutral-200',
+		'item_border'  => 'border-neutral-200 dark:border-blue-chill-100/0',
+		'item_bg'      => 'bg-transparent',
+		'question'     => 'text-zinc-900 dark:text-neutral-200',
+		'answer'       => 'text-zinc-900 dark:text-neutral-200',
+		'summary_focus'=> 'focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',
+		'chevron'      => 'bg-blue-chill-300 dark:bg-neutral-800 text-neutral-600 dark:text-blue-chill-300',
+	];
+
+	// Schema for FAQPage (for SEO JSON-LD)
+	$schema_items = array_map( function ( $item ) {
+		return [
+			'question' => $item['question'],
+			'answer'   => wp_strip_all_tags( $item['answer'] ),
+		];
+	}, $items );
+
+	return array_merge( $fields, [
+		'title_tag'    => $title_tag,
+		'items'        => $items,
+		'classes'      => $classes,
+		'widget_id'    => $widget_id,
+		'animation'    => $animation,
+		'schema_items' => array_map( function ( $item ) {
+			return [ 'question' => $item['question'], 'answer' => wp_strip_all_tags( $item['answer'] ) ];
+		}, $items ),
+	] );
+}

package/packages/widgets/faq-centered/faq-centered.php

@@ -0,0 +1,223 @@
+<?php
+/**
+ * Widget: FAQ
+ *
+ * Accordion-style FAQ section with multiple layouts: stacked, split, and centered.
+ * Supports optional section title/description and FAQPage schema for SEO.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Repeater;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * FAQ Widget
+ */
+class Faq_Centered extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'faq-centered';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'FAQ (Centered)', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-accordion';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-content' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'faq', 'accordion', 'questions', 'answers', 'expandable' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_header_section();
+		$this->register_items_section();
+		$this->register_layout_section();
+		$this->register_animation_controls( true, true );
+	}
+
+	private function register_header_section(): void {
+		$this->start_controls_section(
+			'section_header',
+			[
+				'label' => esc_html__( 'Header', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_title',
+			[
+				'label'   => esc_html__( 'Show Title', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'title',
+			[
+				'label'       => esc_html__( 'Title', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Frequently asked questions', 'sociallane-elements' ),
+				'label_block' => true,
+				'placeholder' => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'title_tag',
+			[
+				'label'   => esc_html__( 'Title Tag', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'h2',
+				'options' => [
+					'h1' => 'H1',
+					'h2' => 'H2',
+					'h3' => 'H3',
+				],
+			]
+		);
+
+		$this->add_control(
+			'show_description',
+			[
+				'label'   => esc_html__( 'Show Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'description',
+			[
+				'label'   => esc_html__( 'Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXTAREA,
+				'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' ),
+				'placeholder' => esc_html__( 'Lorem ipsum dolor sit amet...', 'sociallane-elements' ),
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_items_section(): void {
+		$this->start_controls_section(
+			'section_items',
+			[
+				'label' => esc_html__( 'FAQ Items', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$repeater = new Repeater();
+
+		$repeater->add_control(
+			'question',
+			[
+				'label'       => esc_html__( 'Question', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Lorem ipsum dolor sit amet?', 'sociallane-elements' ),
+				'label_block' => true,
+			]
+		);
+
+		$repeater->add_control(
+			'answer',
+			[
+				'label'   => esc_html__( 'Answer', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXTAREA,
+				'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' ),
+			]
+		);
+
+		$repeater->add_control(
+			'button_label',
+			[
+				'label'       => esc_html__( 'Button Label', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+			]
+		);
+
+		$repeater->add_control(
+			'button_url',
+			[
+				'label' => esc_html__( 'Button Link', 'sociallane-elements' ),
+				'type'  => Controls_Manager::URL,
+			]
+		);
+
+		$this->add_control(
+			'faq_items',
+			[
+				'label'       => esc_html__( 'Items', 'sociallane-elements' ),
+				'type'        => Controls_Manager::REPEATER,
+				'fields'      => $repeater->get_controls(),
+				'default'     => [
+					[
+						'question' => esc_html__( 'Lorem ipsum dolor sit amet?', 'sociallane-elements' ),
+						'answer'   => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' ),
+					],
+					[
+						'question' => esc_html__( 'Consectetur adipiscing elit?', 'sociallane-elements' ),
+						'answer'   => esc_html__( 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 'sociallane-elements' ),
+					],
+					[
+						'question' => esc_html__( 'Sed do eiusmod tempor?', 'sociallane-elements' ),
+						'answer'   => esc_html__( 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.', 'sociallane-elements' ),
+					],
+				],
+				'title_field' => '{{{ question }}}',
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_layout_section(): void {
+		$this->start_controls_section(
+			'section_layout',
+			[
+				'label' => esc_html__( 'Layout', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'first_open',
+			[
+				'label'        => esc_html__( 'First item open by default', 'sociallane-elements' ),
+				'type'         => Controls_Manager::SWITCHER,
+				'default'      => 'yes',
+				'return_value' => 'yes',
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_faq_centered_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

package/packages/widgets/faq-centered/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@sociallane/widget-faq-centered",
+  "version": "1.0.0",
+  "private": true,
+  "description": "SocialLane Elements widget: faq-centered",
+  "peerDependencies": {
+    "@sociallane/core": "^1.0.0"
+  },
+  "scripts": {
+    "build": "echo \"No widget-specific build\""
+  }
+}

package/packages/widgets/faq-centered/templates/partials/accordion.php

@@ -0,0 +1,70 @@
+<?php
+/**
+ * FAQ: Accordion list
+ *
+ * Renders FAQ items as <details>/<summary> for accessibility and no-JS support.
+ * Expects $view with items and classes.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! is_array( $view['items'] ?? null ) || empty( $view['items'] ) ) {
+	return;
+}
+
+$items       = $view['items'];
+$faq_classes = is_array( $view['classes'] ?? null ) ? $view['classes'] : [
+	'item_border'   => 'border-neutral-200 dark:border-blue-chill-100/0',
+	'item_bg'       => 'bg-transparent',
+	'question'      => 'text-zinc-900 dark:text-neutral-200',
+	'answer'        => 'text-zinc-900 dark:text-neutral-200',
+	'summary_focus' => 'focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',
+	'chevron'       => 'bg-blue-chill-300 dark:bg-neutral-800 text-neutral-600 dark:text-blue-chill-300',
+];
+$elements_path = defined( 'SOCIALLANE_ELEMENTS_PATH' ) ? SOCIALLANE_ELEMENTS_PATH . 'elements' : '';
+$stagger_attrs = isset( $stagger_attrs ) ? $stagger_attrs : '';
+?>
+
+<div class="space-y-0"<?php echo $stagger_attrs !== '' ? ' ' . $stagger_attrs : ''; ?>>
+	<?php foreach ( $items as $item ) : ?>
+		<?php if ( ! is_array( $item ) ) : ?>
+			<?php continue; ?>
+		<?php endif; ?>
+		<details
+			class="faq-details group border-b <?php echo esc_attr( $faq_classes['item_border'] ); ?> <?php echo esc_attr( $faq_classes['item_bg'] ); ?>"
+			<?php if ( ! empty( $item['open'] ) ) : ?>open<?php endif; ?>
+			id="<?php echo esc_attr( $item['id'] ); ?>"
+		>
+			<summary
+				class="flex items-center justify-between gap-4 list-none cursor-pointer py-4 md:py-5 pr-8 md:pr-10 text-left font-semibold <?php echo esc_attr( $faq_classes['question'] ); ?> text-base md:text-lg focus:outline-none focus:ring-2 <?php echo esc_attr( $faq_classes['summary_focus'] ); ?> rounded"
+				aria-expanded="<?php echo ! empty( $item['open'] ) ? 'true' : 'false'; ?>"
+			>
+				<span><?php echo $item['question']; ?></span>
+				<span class="shrink-0 w-6 h-6 flex items-center justify-center rounded-full <?php echo esc_attr( $faq_classes['chevron'] ); ?> group-open:rotate-180 transition-transform duration-200" aria-hidden="true">
+					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+					</svg>
+				</span>
+			</summary>
+			<div class="faq-answer-wrapper">
+				<div class="faq-answer-content min-h-0 overflow-hidden">
+					<div class="pb-4 md:pb-5 pl-0 pr-8 md:pr-10 <?php echo esc_attr( $faq_classes['answer'] ); ?> text-base md:text-lg leading-relaxed">
+						<?php echo $item['answer']; ?>
+						<?php if ( ! empty( $item['button'] ) && $elements_path !== '' ) : ?>
+							<p class="mt-4">
+								<?php
+								$button = $item['button'];
+								include $elements_path . '/button/templates/render.php';
+								?>
+							</p>
+						<?php endif; ?>
+					</div>
+				</div>
+			</div>
+		</details>
+	<?php endforeach; ?>
+</div>

package/packages/widgets/faq-centered/templates/partials/layout-centered.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * FAQ: Centered layout
+ *
+ * Header centered, accordion full width below (or constrained).
+ * Expects $view.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$classes = $view['classes'];
+?>
+
+<div class="max-w-4xl mx-auto">
+	<?php if ( ( $view['show_title'] && $view['title'] ) || ( $view['show_description'] && $view['description'] ) ) : ?>
+		<header class="text-center mb-10 md:mb-12">
+			<?php if ( $view['show_title'] && $view['title'] ) : ?>
+				<<?php echo $view['title_tag']; ?>
+					id="faq-title-<?php echo esc_attr( $view['widget_id'] ); ?>"
+					class="<?php echo esc_attr( $classes['title'] ); ?> text-2xl md:text-3xl lg:text-4xl font-bold font-heading leading-tight"
+					<?php echo ! empty( $headline_attrs ) ? ' ' . $headline_attrs : ''; ?>
+				>
+					<?php echo $view['title']; ?>
+				</<?php echo $view['title_tag']; ?>>
+			<?php endif; ?>
+			<?php if ( $view['show_description'] && $view['description'] ) : ?>
+				<div class="<?php echo esc_attr( $classes['description'] ); ?> mt-4 text-lg leading-relaxed max-w-2xl mx-auto">
+					<?php echo $view['description']; ?>
+				</div>
+			<?php endif; ?>
+		</header>
+	<?php endif; ?>
+
+	<div class="faq-accordion">
+		<?php include __DIR__ . '/accordion.php'; ?>
+	</div>
+</div>