cinqcinqdev-seo 0.1.71 → 0.1.73

package/dist/runtime/components/sections/swiss-style/ContactForm.vue

@@ -0,0 +1,173 @@
+<template>
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sv-in' : 'sv-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+    <div :class="[containerClass]">
+
+      <!-- SPLIT layout -->
+      <div v-if="layout === 'split'" class="grid grid-cols-1 md:grid-cols-2 border divide-x" :style="{ borderColor: ca(textColor,'15') }">
+        <div class="p-10 md:p-14">
+          <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-6" :style="{ opacity: 0.35 }">{{ badge }}</span>
+          <component :is="titleTag" class="font-black uppercase leading-[0.88] mb-6" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+          <p v-if="description" class="text-sm leading-relaxed mb-8" :style="{ opacity: 0.55 }">{{ description }}</p>
+          <div v-if="infos && infos.length" class="space-y-4">
+            <div v-for="(info, i) in infos" :key="i" class="flex items-start gap-3 border-b pb-4" :style="{ borderColor: ca(textColor,'08') }">
+              <div>
+                <p class="text-[11px] font-black uppercase tracking-widest mb-0.5" :style="{ opacity: 0.4 }">{{ info.label }}</p>
+                <p class="text-sm">{{ info.value }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="p-10 md:p-14">
+          <form @submit.prevent="handleSubmit" class="space-y-6">
+            <div v-for="field in fields" :key="field.name" class="flex flex-col gap-1.5 border-b pb-5" :style="{ borderColor: ca(textColor,'10') }">
+              <label class="text-[10px] font-black uppercase tracking-widest" :style="{ opacity: 0.4 }">{{ field.label }}<span v-if="field.required" class="ml-0.5">*</span></label>
+              <textarea v-if="field.type === 'textarea'" v-model="formData[field.name]" :placeholder="field.placeholder" :required="field.required" rows="3"
+                class="w-full bg-transparent text-sm resize-none outline-none" :style="{ color: textColor }"></textarea>
+              <input v-else v-model="formData[field.name]" :type="field.type || 'text'" :placeholder="field.placeholder" :required="field.required"
+                class="w-full bg-transparent text-sm outline-none" :style="{ color: textColor }" />
+            </div>
+            <button type="submit" :disabled="submitting"
+              class="w-full py-4 text-[11px] font-black uppercase tracking-widest transition-all hover:opacity-80 disabled:opacity-50 border"
+              :style="{ backgroundColor: textColor, color: bgColor, borderColor: textColor }">
+              {{ submitting ? '...' : (ctaText || 'Envoyer') }}
+            </button>
+            <p v-if="sent" class="text-xs" :style="{ opacity: 0.6 }">{{ successMessage }}</p>
+          </form>
+        </div>
+      </div>
+
+      <!-- CENTERED layout -->
+      <div v-else-if="layout === 'centered'" class="max-w-xl mx-auto">
+        <div class="border-b pb-6 mb-10" :style="{ borderColor: ca(textColor,'15') }">
+          <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-3" :style="{ opacity: 0.35 }">{{ badge }}</span>
+          <component :is="titleTag" class="font-black uppercase leading-[0.88]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+          <p v-if="description" class="text-sm leading-relaxed mt-4" :style="{ opacity: 0.55 }">{{ description }}</p>
+        </div>
+        <form @submit.prevent="handleSubmit" class="space-y-6">
+          <div v-for="field in fields" :key="field.name" class="flex flex-col gap-1.5 border-b pb-5" :style="{ borderColor: ca(textColor,'10') }">
+            <label class="text-[10px] font-black uppercase tracking-widest" :style="{ opacity: 0.4 }">{{ field.label }}<span v-if="field.required" class="ml-0.5">*</span></label>
+            <textarea v-if="field.type === 'textarea'" v-model="formData[field.name]" :placeholder="field.placeholder" :required="field.required" rows="3"
+              class="w-full bg-transparent text-sm resize-none outline-none" :style="{ color: textColor }"></textarea>
+            <input v-else v-model="formData[field.name]" :type="field.type || 'text'" :placeholder="field.placeholder" :required="field.required"
+              class="w-full bg-transparent text-sm outline-none" :style="{ color: textColor }" />
+          </div>
+          <button type="submit" :disabled="submitting"
+            class="w-full py-4 text-[11px] font-black uppercase tracking-widest border transition-all hover:opacity-80 disabled:opacity-50"
+            :style="{ backgroundColor: textColor, color: bgColor, borderColor: textColor }">
+            {{ submitting ? '...' : (ctaText || 'Envoyer') }}
+          </button>
+          <p v-if="sent" class="text-xs" :style="{ opacity: 0.6 }">{{ successMessage }}</p>
+        </form>
+      </div>
+
+      <!-- MINIMAL layout (default) -->
+      <div v-else class="max-w-2xl">
+        <div class="border-b pb-6 mb-10" :style="{ borderColor: ca(textColor,'15') }">
+          <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-3" :style="{ opacity: 0.35 }">{{ badge }}</span>
+          <component :is="titleTag" class="font-black uppercase leading-[0.88]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+          <p v-if="description" class="text-sm leading-relaxed mt-4" :style="{ opacity: 0.55 }">{{ description }}</p>
+        </div>
+        <form @submit.prevent="handleSubmit" class="space-y-0">
+          <div v-for="field in fields" :key="field.name" class="flex flex-col gap-2 border-b py-5" :style="{ borderColor: ca(textColor,'10') }">
+            <label class="text-[10px] font-black uppercase tracking-widest" :style="{ opacity: 0.4 }">{{ field.label }}<span v-if="field.required" class="ml-0.5">*</span></label>
+            <textarea v-if="field.type === 'textarea'" v-model="formData[field.name]" :placeholder="field.placeholder" :required="field.required" rows="3"
+              class="w-full bg-transparent text-sm resize-none outline-none" :style="{ color: textColor }"></textarea>
+            <input v-else v-model="formData[field.name]" :type="field.type || 'text'" :placeholder="field.placeholder" :required="field.required"
+              class="w-full bg-transparent text-sm outline-none" :style="{ color: textColor }" />
+          </div>
+          <button type="submit" :disabled="submitting"
+            class="mt-8 px-8 py-4 text-[11px] font-black uppercase tracking-widest border transition-all hover:opacity-80 disabled:opacity-50"
+            :style="{ backgroundColor: textColor, color: bgColor, borderColor: textColor }">
+            {{ submitting ? '...' : (ctaText || 'Envoyer') }}
+          </button>
+          <p v-if="sent" class="text-xs mt-4" :style="{ opacity: 0.6 }">{{ successMessage }}</p>
+        </form>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup>
+const ca = (c, h) => {
+  const m = c?.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : (c || "") + h;
+};
+import { ref, computed, onMounted } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "split" },
+  badge: { type: String, default: "" },
+  title: { type: String, default: "Contactez-nous" },
+  titleTag: { type: String, default: "h2" },
+  description: { type: String, default: "" },
+  ctaText: { type: String, default: "Envoyer" },
+  successMessage: { type: String, default: "Message envoy\xE9 \u2713" },
+  infos: { type: Array, default: () => [] },
+  fields: { type: Array, default: () => [
+    { name: "name", label: "Nom", type: "text", required: true },
+    { name: "email", label: "Email", type: "email", required: true },
+    { name: "message", label: "Message", type: "textarea", required: true }
+  ] },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "sharp" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" },
+  paddingTop: { type: String, default: "" },
+  paddingBottom: { type: String, default: "" },
+  marginTop: { type: String, default: "" },
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting) {
+      isVisible.value = true;
+      obs.disconnect();
+    }
+  }, { threshold: 0.06 });
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
+});
+const formData = ref({});
+const submitting = ref(false);
+const sent = ref(false);
+const handleSubmit = async () => {
+  submitting.value = true;
+  await new Promise((r) => setTimeout(r, 800));
+  submitting.value = false;
+  sent.value = true;
+};
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-8 md:px-16", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-8 md:px-16");
+const containerClass = computed(() => ({ narrow: "max-w-3xl mx-auto", normal: "max-w-6xl mx-auto", wide: "max-w-7xl mx-auto", full: "max-w-full" })[props.contentWidth] || "max-w-6xl mx-auto");
+const titleFontSize = computed(() => ({ sm: "clamp(1rem,1.5vw,1.3rem)", md: "clamp(1.5rem,2.5vw,2rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(1.5rem,2.5vw,2rem)");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
+  if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
+  if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
+  return s;
+});
+</script>
+
+<style scoped>
+.sv-out{opacity:0;transform:translateY(16px)}.sv-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
+</style>

package/dist/runtime/components/sections/swiss-style/ContactForm.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/dist/runtime/components/sections/swiss-style/DataTable.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/dist/runtime/components/sections/swiss-style/DataTable.vue

@@ -0,0 +1,245 @@
+<template>
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sv-in' : 'sv-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+    <div :class="[containerClass]">
+
+      <!-- Header row: title + search -->
+      <div v-if="badge || title || description || searchable" class="flex flex-col md:flex-row md:items-end gap-6 mb-10 pb-6 border-b" :style="{ borderColor: ca(textColor,'12') }">
+        <div class="flex-1">
+          <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-3" :style="{ opacity: 0.35 }">{{ badge }}</span>
+          <component :is="titleTag" v-if="title" class="font-black uppercase leading-[0.88]"
+            :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+          <p v-if="description" :class="[bodyClass, 'leading-relaxed mt-3']" :style="{ opacity: 0.55 }">{{ description }}</p>
+        </div>
+        <!-- Search input -->
+        <div v-if="searchable" class="shrink-0 relative">
+          <input
+            v-model="query"
+            type="search"
+            placeholder="Search…"
+            :class="[bodyClass, 'w-full md:w-56 pl-9 pr-4 py-2.5 border outline-none transition-all bg-transparent']"
+            :style="{ borderColor: ca(textColor,'20'), color: textColor }"
+            @input="currentPage = 1"
+          />
+          <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm pointer-events-none" :style="{ opacity: 0.35 }">⌕</span>
+        </div>
+      </div>
+
+      <!-- DEFAULT / STRIPED / MINIMAL table -->
+      <div v-if="layout !== 'cards'" class="overflow-x-auto border" :style="{ borderColor: ca(textColor,'12') }">
+        <table class="w-full min-w-[400px]" style="border-collapse: collapse;">
+          <caption v-if="caption" class="text-left px-6 pb-3 text-xs" :style="{ opacity: 0.4 }">{{ caption }}</caption>
+          <thead :class="stickyHeader ? 'sticky top-0 z-10' : ''" :style="{ backgroundColor: bgColor }">
+            <tr :style="{ borderBottom: `2px solid ${ca(textColor,'15')}` }">
+              <th
+                v-for="(col, ci) in parsedCols" :key="ci"
+                :class="['px-6 py-4 text-[9px] font-black uppercase tracking-[0.4em] select-none', col.align === 'center' ? 'text-center' : col.align === 'right' ? 'text-right' : 'text-left', sortable ? 'cursor-pointer hover:opacity-100' : '']"
+                :style="{ opacity: 0.4, borderLeft: ci > 0 ? `1px solid ${ca(textColor,'08')}` : 'none' }"
+                @click="sortable && toggleSort(ci)"
+              >
+                <span class="inline-flex items-center gap-1.5">
+                  {{ col.label }}
+                  <span v-if="sortable" class="text-[10px] transition-all" :style="{ opacity: sortCol === ci ? 1 : 0.25 }">
+                    {{ sortCol === ci ? (sortDir === 'asc' ? '↑' : '↓') : '↕' }}
+                  </span>
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="!pageRows.length">
+              <td :colspan="parsedCols.length" class="px-6 py-12 text-center text-sm" :style="{ opacity: 0.3 }">No results found</td>
+            </tr>
+            <tr
+              v-for="(row, ri) in pageRows" :key="ri"
+              :style="{
+                borderTop: `1px solid ${ca(textColor,'07')}`,
+                backgroundColor: layout === 'striped' && ri % 2 === 1 ? ca(textColor,'03') : 'transparent',
+              }"
+            >
+              <td
+                v-for="(cell, ci) in row.cells" :key="ci"
+                :class="['px-6 py-4', parsedCols[ci]?.align === 'center' ? 'text-center' : parsedCols[ci]?.align === 'right' ? 'text-right' : 'text-left']"
+                :style="{ borderLeft: ci > 0 ? `1px solid ${ca(textColor,'06')}` : 'none' }"
+              >
+                <span v-if="parsedCols[ci]?.badge" class="inline-block text-[9px] font-black uppercase tracking-wider px-2.5 py-0.5 border"
+                  :style="{ borderColor: ca(textColor,'18'), color: textColor }">{{ cell }}</span>
+                <span v-else :class="[bodyClass]" :style="{ opacity: 0.8 }">{{ cell }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- CARDS layout -->
+      <div v-else class="grid gap-0 border divide-x divide-y" :class="gridCols" :style="{ borderColor: ca(textColor,'12') }">
+        <div v-if="!pageRows.length" class="col-span-full py-12 text-center text-sm" :style="{ opacity: 0.3 }">No results found</div>
+        <div
+          v-for="(row, ri) in pageRows" :key="ri"
+          class="p-6"
+        >
+          <dl class="space-y-3">
+            <div v-for="(cell, ci) in row.cells" :key="ci" class="flex items-start justify-between gap-4 border-b pb-2.5 last:border-b-0" :style="{ borderColor: ca(textColor,'07') }">
+              <dt class="text-[9px] font-black uppercase tracking-[0.4em] shrink-0" :style="{ opacity: 0.35 }">{{ parsedCols[ci]?.label }}</dt>
+              <dd :class="[bodyClass, 'font-medium text-right']" :style="{ opacity: 0.8 }">{{ cell }}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+
+      <!-- Pagination -->
+      <div v-if="perPage > 0 && totalPages > 1" class="flex items-center justify-between mt-6 border-t pt-4" :style="{ borderColor: ca(textColor,'10') }">
+        <span :class="[bodyClass]" :style="{ opacity: 0.4 }">
+          {{ (currentPage - 1) * perPage + 1 }}–{{ Math.min(currentPage * perPage, filteredRows.length) }} of {{ filteredRows.length }}
+        </span>
+        <div class="flex items-center gap-1">
+          <button
+            v-for="p in totalPages" :key="p"
+            class="w-8 h-8 text-xs font-black border transition-all"
+            :style="p === currentPage
+              ? { backgroundColor: textColor, color: bgColor, borderColor: textColor }
+              : { borderColor: ca(textColor,'15'), color: textColor, opacity: 0.5 }"
+            @click="currentPage = p"
+          >{{ p }}</button>
+        </div>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup>
+const ca = (c, h) => {
+  const m = c?.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : (c || "") + h;
+};
+import { ref, computed, onMounted } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "default" },
+  titleTag: { type: String, default: "h2" },
+  badge: { type: String, default: "" },
+  title: { type: String, default: "" },
+  description: { type: String, default: "" },
+  caption: { type: String, default: "" },
+  searchable: { type: Boolean, default: false },
+  sortable: { type: Boolean, default: true },
+  stickyHeader: { type: Boolean, default: false },
+  perPage: { type: Number, default: 0 },
+  cardColumns: { type: String, default: "auto" },
+  columns: { type: Array, default: () => [
+    { label: "Name", align: "left", badge: false },
+    { label: "Role", align: "left", badge: false },
+    { label: "Department", align: "left", badge: false },
+    { label: "Status", align: "left", badge: true }
+  ] },
+  items: { type: Array, default: () => [
+    { cells: "Alice Martin | Lead Designer | Product | Active" },
+    { cells: "Bob Chen | Senior Developer | Engineering | Active" },
+    { cells: "Clara Dumont | Product Manager | Product | On leave" },
+    { cells: "David Kim | UX Researcher | Design | Active" },
+    { cells: "Emma Laurent | DevOps Engineer | Engineering | Active" },
+    { cells: "F\xE9lix Moreau | Data Analyst | Analytics | Active" }
+  ] },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "sharp" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" },
+  paddingTop: { type: String, default: "" },
+  paddingBottom: { type: String, default: "" },
+  marginTop: { type: String, default: "" },
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting) {
+      isVisible.value = true;
+      obs.disconnect();
+    }
+  }, { threshold: 0.05 });
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
+});
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-8 md:px-16", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-8 md:px-16");
+const containerClass = computed(() => ({ narrow: "max-w-3xl mx-auto", normal: "max-w-6xl mx-auto", wide: "max-w-7xl mx-auto", full: "max-w-full" })[props.contentWidth] || "max-w-6xl mx-auto");
+const titleFontSize = computed(() => ({ sm: "clamp(0.9rem,1vw,1.1rem)", md: "clamp(1rem,1.5vw,1.4rem)", lg: "clamp(2.2rem,5vw,4rem)" })[props.textSize] || "clamp(1rem,1.5vw,1.4rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const parsedCols = computed(() => (props.columns || []).map((col) => ({
+  label: col.label || "",
+  align: col.align || "left",
+  badge: col.badge || false
+})));
+const parsedRows = computed(() => (props.items || []).map((row) => ({
+  cells: (row.cells || "").split("|").map((c) => c.trim())
+})));
+const query = ref("");
+const sortCol = ref(-1);
+const sortDir = ref("asc");
+const toggleSort = (i) => {
+  if (sortCol.value === i) sortDir.value = sortDir.value === "asc" ? "desc" : "asc";
+  else {
+    sortCol.value = i;
+    sortDir.value = "asc";
+  }
+};
+const currentPage = ref(1);
+const filteredRows = computed(() => {
+  let rows = parsedRows.value;
+  if (props.searchable && query.value.trim()) {
+    const q = query.value.toLowerCase();
+    rows = rows.filter((r) => r.cells.some((c) => c.toLowerCase().includes(q)));
+  }
+  if (props.sortable && sortCol.value >= 0) {
+    rows = [...rows].sort((a, b) => {
+      const av = a.cells[sortCol.value] || "";
+      const bv = b.cells[sortCol.value] || "";
+      const cmp = av.localeCompare(bv, void 0, { numeric: true, sensitivity: "base" });
+      return sortDir.value === "asc" ? cmp : -cmp;
+    });
+  }
+  return rows;
+});
+const totalPages = computed(() => props.perPage > 0 ? Math.ceil(filteredRows.value.length / props.perPage) : 1);
+const pageRows = computed(() => {
+  if (props.perPage <= 0) return filteredRows.value;
+  const start = (currentPage.value - 1) * props.perPage;
+  return filteredRows.value.slice(start, start + props.perPage);
+});
+const gridCols = computed(() => {
+  if (props.cardColumns === "1") return "grid-cols-1";
+  if (props.cardColumns === "2") return "grid-cols-1 md:grid-cols-2";
+  if (props.cardColumns === "4") return "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4";
+  const n = parsedCols.value.length;
+  if (n <= 3) return "grid-cols-1 md:grid-cols-2";
+  return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
+});
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
+  if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
+  if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
+  return s;
+});
+</script>
+
+<style scoped>
+.sv-out{opacity:0;transform:translateY(16px)}.sv-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
+</style>

package/dist/runtime/components/sections/swiss-style/DataTable.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/dist/runtime/components/sections/swiss-style/FAQ.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/dist/runtime/components/sections/swiss-style/FAQ.vue

@@ -0,0 +1,107 @@
+<template>
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sv-in' : 'sv-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+    <div :class="[containerClass]">
+
+      <!-- Header -->
+      <div class="border-b pb-6 mb-0 flex items-end gap-8 justify-between" :style="{ borderColor: ca(textColor,'15') }">
+        <component :is="titleTag" class="font-black uppercase leading-[0.88]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+        <span class="text-[9px] font-black uppercase tracking-[0.4em] pb-1 shrink-0" :style="{ opacity: 0.3 }">Q&amp;A</span>
+      </div>
+
+      <!-- Items -->
+      <div class="divide-y" :style="{ borderColor: ca(textColor,'10') }">
+        <div v-for="(item, index) in items" :key="index" :style="{ borderColor: ca(textColor,'10') }">
+          <button @click="toggle(index)" class="w-full flex items-start justify-between py-7 text-left cursor-pointer gap-8">
+            <div class="flex items-start gap-6">
+              <span class="text-[11px] font-black tabular-nums pt-0.5 shrink-0" :style="{ opacity: 0.25 }">{{ String(index + 1).padStart(2, '0') }}</span>
+              <span class="font-black uppercase tracking-tight leading-snug">{{ item.question }}</span>
+            </div>
+            <span class="text-xl font-light shrink-0 mt-0.5 transition-transform duration-200" :style="{ transform: openIndex === index ? 'rotate(45deg)' : 'none', opacity: 0.4 }">+</span>
+          </button>
+          <div v-if="openIndex === index" class="pl-14 pb-7">
+            <p :class="[bodyClass, 'leading-relaxed']" :style="{ opacity: 0.6 }">{{ item.answer }}</p>
+          </div>
+        </div>
+
+        <!-- Placeholders -->
+        <div v-if="!items.length" v-for="n in 3" :key="n" :style="{ borderColor: ca(textColor,'10') }">
+          <div class="flex items-center gap-6 py-7">
+            <span class="text-[11px] font-black tabular-nums" :style="{ opacity: 0.15 }">0{{ n }}</span>
+            <div class="h-4 flex-1" :style="{ backgroundColor: ca(textColor,'10'), width: n === 1 ? '70%' : n === 2 ? '55%' : '65%' }"></div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup>
+const ca = (c, h) => {
+  const m = c?.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : (c || "") + h;
+};
+import { ref, computed, onMounted } from "vue";
+const props = defineProps({
+  title: { type: String, default: "FAQ" },
+  titleTag: { type: String, default: "h2" },
+  items: { type: Array, default: () => [] },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "sharp" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "narrow" },
+  textSize: { type: String, default: "md" },
+  paddingTop: { type: String, default: "" },
+  paddingBottom: { type: String, default: "" },
+  marginTop: { type: String, default: "" },
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting) {
+      isVisible.value = true;
+      obs.disconnect();
+    }
+  }, { threshold: 0.06 });
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
+});
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-8 md:px-16", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-8 md:px-16");
+const containerClass = computed(() => ({ narrow: "max-w-3xl mx-auto", normal: "max-w-6xl mx-auto", wide: "max-w-7xl mx-auto", full: "max-w-full" })[props.contentWidth] || "max-w-3xl mx-auto");
+const titleFontSize = computed(() => ({ sm: "clamp(1rem,1.5vw,1.3rem)", md: "clamp(1.5rem,2.5vw,2rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(1.5rem,2.5vw,2rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const openIndex = ref(null);
+const toggle = (index) => {
+  openIndex.value = openIndex.value === index ? null : index;
+};
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
+  if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
+  if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
+  return s;
+});
+</script>
+
+<style scoped>
+.sv-out{opacity:0;transform:translateY(16px)}.sv-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
+</style>

package/dist/runtime/components/sections/swiss-style/FAQ.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/dist/runtime/components/sections/swiss-style/Features.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;