svarog-ui-core
Version:
Core components of Svarog UI without themes
1,136 lines (978 loc) • 472 kB
JavaScript
var Yn=Object.defineProperty;var Kn=(e,t,o)=>t in e?Yn(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o;var Fe=(e,t,o)=>Kn(e,typeof t!="symbol"?t+"":t,o);var Oe=new Map,lo=typeof document>"u",co={base:100,component:200,theme:300},te=(e,t,o={})=>{if(lo)return;let{priority:r="component",media:n="all"}=o,a=co[r]||co.component,u=Oe.get(e);if(u&&u.priority>=a)return;u&&uo(e);let c=document.createElement("style");c.id=`svarog-${e}`,c.setAttribute("data-svarog",e),c.setAttribute("data-priority",r),c.setAttribute("data-priority-value",a.toString()),c.setAttribute("media",n),c.textContent=t;let d=Qn(a);d?document.head.insertBefore(c,d):document.head.appendChild(c),Oe.set(e,{priority:a,element:c})},Qn=e=>{let t=document.head.querySelectorAll("style[data-svarog]");for(let o of t)if(parseInt(o.getAttribute("data-priority-value")||"200")>e)return o;return null},T=(e,...t)=>e.reduce((o,r,n)=>o+r+(t[n]||""),""),L=(e,t="component")=>{let o=e.toLowerCase();return(r,n={})=>{te(o,r,{priority:t,...n})}},uo=e=>{if(lo)return;let t=Oe.get(e);t&&t.element&&(t.element.remove(),Oe.delete(e))};var ke=T`
:root {
/* Core spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
--space-40: 160px;
--space-48: 192px;
--space-56: 224px;
--space-64: 256px;
/* Core colors */
--color-white: #ffffff;
--color-black: #000000;
--color-transparent: transparent;
/* Gray scale */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
/* Semantic colors */
--color-text: #1a202c;
--color-text-light: #4a5568;
--color-text-lighter: #718096;
--color-text-disabled: #a0aec0;
--color-text-white: #ffffff;
--color-bg: #ffffff;
--color-bg-secondary: #f7fafc;
--color-bg-transparent: transparent;
--color-border: #e2e8f0;
--color-border-light: #edf2f7;
--color-border-medium: #cbd5e0;
--color-border-dark: #a0aec0;
/* Status colors */
--color-success: #48bb78;
--color-success-light: #68d391;
--color-success-dark: #38a169;
--color-danger: #f56565;
--color-danger-light: #fc8181;
--color-danger-dark: #e53e3e;
--color-warning: #ed8936;
--color-warning-light: #f6ad55;
--color-warning-dark: #dd6b20;
--color-info: #4299e1;
--color-info-light: #63b3ed;
--color-info-dark: #3182ce;
/* Typography scale */
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 30px;
--font-size-4xl: 36px;
--font-size-5xl: 48px;
--font-size-6xl: 60px;
/* Font weights */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* Line heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Transitions */
--transition-fast: all 0.15s ease;
--transition-normal: all 0.3s ease;
--transition-slow: all 0.5s ease;
--transition-duration: 0.3s;
--transition-timing: ease;
/* Shadows */
--shadow-none: none;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md:
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg:
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl:
0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* Border radius */
--radius-none: 0;
--radius-sm: 2px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-3xl: 24px;
--radius-full: 9999px;
/* Z-index scale */
--z-index-0: 0;
--z-index-10: 10;
--z-index-20: 20;
--z-index-30: 30;
--z-index-40: 40;
--z-index-50: 50;
--z-index-dropdown: 1000;
--z-index-sticky: 1020;
--z-index-fixed: 1030;
--z-index-modal-backdrop: 1040;
--z-index-modal: 1050;
--z-index-popover: 1060;
--z-index-tooltip: 1070;
/* Other common variables */
--disabled-background: #f7fafc;
--disabled-opacity: 0.6;
--hover-opacity: 0.8;
--focus-ring: 0 0 0 3px rgba(66, 153, 225, 0.5);
--container-max-width: 1200px;
--container-padding: 16px;
--container-padding-mobile: 16px;
}
`;typeof document<"u"&&te("svarog-base-variables",ke,{priority:"base",media:"all"});var Xn=T`
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Open Sans',
'Helvetica Neue',
sans-serif;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Utility classes */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
`;typeof document<"u"&&te("svarog-base",Xn,{priority:"base"});var M=(e,t)=>(o={})=>{try{O(o,t.requiredProps,e);let r=t(o);if(r._name=e,!r.getElement)throw new Error(`${e}: Component must implement getElement()`);return r.destroy||(r.destroy=()=>{let n=r.getElement();vt(n)}),r}catch(r){throw console.error(`Error creating ${e}:`,r),r}},O=(e,t=[],o="Component")=>{!t||!t.length||t.forEach(r=>{if(e[r]===void 0)throw new Error(`${o}: ${r} is required`)})},vt=e=>{!e||!e._listeners||(Object.entries(e._listeners).forEach(([t,o])=>{e.removeEventListener(t,o)}),e._listeners={})},m=(e,t={})=>{let{attributes:o={},classes:r=[],children:n=[],events:a={},style:u={},text:c,html:d}=t,i=document.createElement(e);return r&&(i.className=Array.isArray(r)?r.filter(Boolean).join(" "):r),Object.entries(o).forEach(([s,l])=>{l!=null&&i.setAttribute(s,l)}),Object.assign(i.style,u),i._listeners={},Object.entries(a).forEach(([s,l])=>{typeof l=="function"&&(i.addEventListener(s,l),i._listeners[s]=l)}),d!==void 0?i.innerHTML=d:c!==void 0&&(i.textContent=c),n.length>0&&W(i,n),i},W=(e,t)=>{let o=document.createDocumentFragment();(Array.isArray(t)?t:[t]).forEach(n=>{n&&(typeof n=="string"?o.appendChild(document.createTextNode(n)):n instanceof Node?o.appendChild(n):typeof n.getElement=="function"&&o.appendChild(n.getElement()))}),e.appendChild(o)};var q=e=>(t={})=>{let o={...t},r=null,n=!1,a=()=>n?(console.warn("Attempted to render destroyed component"),null):e(o);r=a();let u={getElement(){return r},update(c){if(n)return console.warn("Attempted to update destroyed component"),u;let d={...o};if(Object.assign(o,c),u.shouldRerender&&u.shouldRerender(c)){let i=r;r=a(),i&&i.parentNode&&i.parentNode.replaceChild(r,i)}else if(u.partialUpdate)u.partialUpdate(r,c,d);else{let i=r;r=a(),i&&i.parentNode&&i.parentNode.replaceChild(r,i)}return u},destroy(){n||(n=!0,r&&r._listeners&&(Object.entries(r._listeners).forEach(([c,d])=>{r.removeEventListener(c,d)}),r._listeners={}),r&&r._components&&(Object.values(r._components).forEach(c=>{if(c&&typeof c.destroy=="function")try{c.destroy()}catch(d){console.warn("Error destroying child component:",d)}}),r._components={}),r=null)}};return u};var Zn=(e,t)=>o=>{let r=e(o);return t(r,o)},B=e=>t=>{let o=e(t),r=a=>{o.onThemeChange&&o.onThemeChange(a.detail.theme,a.detail.previousTheme)};window.addEventListener("themechange",r);let n=o.destroy;return o.destroy=()=>{window.removeEventListener("themechange",r),n&&n.call(o)},o},yt=(e,t)=>o=>{let r=e(o),n=r.getElement();return Object.entries(t).forEach(([a,u])=>{n.addEventListener(a,c=>{let d=c.target.closest(u);if(d){let i=`handle${a.charAt(0).toUpperCase()+a.slice(1)}`;r[i]&&r[i](c,d)}})}),r};var se=(e,t)=>{let{container:o,customElement:r,messageElement:n,customMessage:a=""}=t,u=e.checkValidity();return o.setAttribute("data-valid",u?"true":"false"),o.classList.toggle("input-container--invalid",!u),o.classList.toggle("input-container--valid",u),o.classList.toggle("has-error",!u),o.classList.toggle("has-success",u),r&&(r.classList.toggle("input-custom--invalid",!u),r.classList.toggle("input-custom--valid",u)),n&&(n.textContent=u?"":a||e.validationMessage),u},H=(e,t,o)=>(o||(o="Component"),Object.entries(t).forEach(([r,n])=>{if(n.required&&(e[r]===void 0||e[r]===null))throw new Error(`${o}: ${r} is required`);if(!((e[r]===void 0||e[r]===null)&&!n.required)){if(n.type&&e[r]!==void 0&&e[r]!==null){let a=typeof e[r];if(n.type==="array"&&!Array.isArray(e[r]))throw new Error(`${o}: ${r} must be an array`);if(n.type!=="array"&&a!==n.type)throw new Error(`${o}: ${r} must be a ${n.type}, got ${a}`)}if(!(e[r]===void 0||e[r]===null)){if(n.type==="array"&&n.minLength!==void 0&&Array.isArray(e[r])&&e[r].length<n.minLength)throw new Error(`${o}: ${r} array is required and must not be empty`);if(n.allowedValues&&e[r]!==void 0&&!n.allowedValues.includes(e[r]))throw new Error(`${o}: ${r} must be either "${n.allowedValues.join('" or "')}"`);if(n.validator&&e[r]!==void 0&&typeof n.validator=="function"){let a=n.validator(e[r]);if(a!==!0)throw new Error(`${o}: ${r} ${a||"is invalid"}`)}}}}),!0);var po=T`
.accordion {
/* Base styles */
width: 100%;
border: var(--accordion-border, 1px solid var(--color-border-light));
border-radius: var(--accordion-radius, 0);
background: var(--accordion-bg, var(--color-transparent));
overflow: hidden;
}
/* Accordion Item */
.accordion__item {
border-bottom: var(
--accordion-item-border,
1px solid var(--color-border-light)
);
transition: var(--accordion-transition, var(--transition-normal));
}
.accordion__item:last-child {
border-bottom: none;
}
.accordion__item--expanded {
background: var(--accordion-expanded-bg, var(--color-bg-light));
}
/* Header/Trigger */
.accordion__header {
width: 100%;
padding: var(--accordion-header-padding, var(--space-4));
background: var(--accordion-header-bg, transparent);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--accordion-header-gap, var(--space-3));
text-align: left;
font-family: var(--accordion-font-family, var(--font-family-primary));
font-size: var(--accordion-font-size, var(--font-size-base));
font-weight: var(--accordion-font-weight, var(--font-weight-medium));
color: var(--accordion-header-color, var(--color-text));
transition: var(--accordion-transition, var(--transition-normal));
position: relative;
}
.accordion__header:hover {
background: var(--accordion-header-hover-bg, var(--color-bg-light));
color: var(--accordion-header-hover-color, var(--color-text));
}
.accordion__header:focus {
outline: none;
box-shadow: var(--accordion-focus-shadow, var(--focus-ring));
z-index: 1;
}
.accordion__header:focus-visible {
outline: 2px solid
var(--accordion-focus-outline-color, var(--color-primary));
outline-offset: -2px;
}
/* Title */
.accordion__title {
flex: 1;
text-align: inherit;
}
/* Icon Container - Enhanced for flexible designs */
.accordion__icon {
flex-shrink: 0;
width: var(--accordion-icon-size, 1.5rem);
height: var(--accordion-icon-size, 1.5rem);
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: var(--accordion-icon-color, var(--color-text-light));
}
/* Content-based icons (default - backward compatible) */
.accordion__icon::before {
content: var(--accordion-icon-content, '▼');
font-size: var(--accordion-icon-font-size, 0.75rem);
color: inherit;
transition: var(--accordion-icon-transition, transform 0.3s ease);
display: var(--accordion-icon-display, block);
transform-origin: center;
}
.accordion__item--expanded .accordion__icon::before {
transform: var(--accordion-icon-expanded-transform, rotate(180deg));
}
/* CSS Arrow Design (exact match with Select component) */
.accordion__icon-arrow {
position: absolute;
top: 50%;
right: var(--accordion-arrow-right, 0);
left: auto;
width: var(--accordion-arrow-size, 12px);
height: var(--accordion-arrow-size, 12px);
border-right: var(--accordion-arrow-border, 2px solid currentColor);
border-bottom: var(--accordion-arrow-border, 2px solid currentColor);
transform: var(--accordion-arrow-transform, translateY(-75%) rotate(45deg));
transform-origin: center;
transition: var(--accordion-arrow-transition, transform 0.2s ease);
display: var(--accordion-arrow-display, none);
pointer-events: none;
}
.accordion__item--expanded .accordion__icon-arrow {
transform: var(
--accordion-arrow-expanded-transform,
translateY(-25%) rotate(-135deg)
);
}
/* Icon type variants for easy switching */
/* Arrow variant - shows CSS arrow, hides content icon */
.accordion--arrow .accordion__icon::before {
display: none;
}
.accordion--arrow .accordion__icon-arrow {
display: block;
}
/* Content variant - explicit content icon (default behavior) */
.accordion--content .accordion__icon::before {
display: block;
}
.accordion--content .accordion__icon-arrow {
display: none;
}
/* None variant - no icon */
.accordion--no-icon .accordion__icon {
display: none;
}
/* Chevron variant - right-pointing chevron that rotates down */
.accordion--chevron .accordion__icon::before {
content: var(--accordion-chevron-content, '›');
font-size: var(--accordion-chevron-font-size, 1rem);
display: block;
transform: var(--accordion-chevron-transform, rotate(0deg));
}
.accordion--chevron .accordion__icon-arrow {
display: none;
}
.accordion--chevron .accordion__item--expanded .accordion__icon::before {
transform: var(--accordion-chevron-expanded-transform, rotate(90deg));
}
/* Plus/Minus variant */
.accordion--plus-minus .accordion__icon::before {
content: var(--accordion-plus-content, '+');
font-size: var(--accordion-plus-font-size, 1.25rem);
font-weight: var(--accordion-plus-font-weight, 300);
display: block;
transform: none;
}
.accordion--plus-minus .accordion__icon-arrow {
display: none;
}
.accordion--plus-minus .accordion__item--expanded .accordion__icon::before {
content: var(--accordion-minus-content, '−');
transform: none;
}
/* Caret variant - small triangular caret */
.accordion--caret .accordion__icon::before {
content: var(--accordion-caret-content, '▸');
font-size: var(--accordion-caret-font-size, 0.875rem);
display: block;
transform: var(--accordion-caret-transform, rotate(0deg));
}
.accordion--caret .accordion__icon-arrow {
display: none;
}
.accordion--caret .accordion__item--expanded .accordion__icon::before {
transform: var(--accordion-caret-expanded-transform, rotate(90deg));
}
/* Panel/Content */
.accordion__panel {
overflow: hidden;
transition: var(--accordion-panel-transition, max-height 0.3s ease);
max-height: 0;
}
.accordion__item--expanded .accordion__panel {
max-height: var(--accordion-panel-max-height, 2000px);
}
.accordion__content {
padding: var(--accordion-content-padding, var(--space-4));
color: var(--accordion-content-color, var(--color-text));
font-size: var(--accordion-content-font-size, var(--font-size-sm));
line-height: var(
--accordion-content-line-height,
var(--line-height-relaxed)
);
}
/* Layout Variants */
/* Bordered variant */
.accordion--bordered {
border: none;
}
.accordion--bordered .accordion__item {
border: var(
--accordion-bordered-item-border,
1px solid var(--color-border-light)
);
border-radius: var(--accordion-bordered-radius, 0);
margin-bottom: var(--accordion-bordered-gap, var(--space-2));
}
.accordion--bordered .accordion__item:last-child {
margin-bottom: 0;
}
/* Minimal variant */
.accordion--minimal {
border: none;
background: transparent;
}
.accordion--minimal .accordion__item {
border-bottom: var(
--accordion-minimal-border,
1px solid var(--color-border-light)
);
}
.accordion--minimal .accordion__header {
padding-left: 0;
padding-right: 0;
}
.accordion--minimal .accordion__content {
padding-left: 0;
padding-right: 0;
}
/* Flush variant */
.accordion--flush {
border-radius: 0;
border-left: none;
border-right: none;
}
/* Accessibility */
.accordion__panel[aria-hidden='true'] {
visibility: hidden;
}
.accordion__panel[aria-hidden='false'] {
visibility: visible;
}
/* Animation optimization */
@media (prefers-reduced-motion: reduce) {
.accordion__icon,
.accordion__icon::before,
.accordion__icon-arrow,
.accordion__panel,
.accordion__header,
.accordion__item {
transition: none;
}
}
/* Mobile adjustments */
@media (max-width: 768px) {
.accordion__header {
padding: var(--accordion-header-padding-mobile, var(--space-3));
font-size: var(--accordion-font-size-mobile, var(--font-size-sm));
}
.accordion__content {
padding: var(--accordion-content-padding-mobile, var(--space-3));
}
.accordion__icon {
width: var(--accordion-icon-size-mobile, 1.25rem);
height: var(--accordion-icon-size-mobile, 1.25rem);
}
}
`;var Jn=L("Accordion"),ea=(e,t,o)=>{let r=m("div",{classes:["accordion__item",t&&"accordion__item--expanded"].filter(Boolean),attributes:{"data-accordion-item":e.id||""}}),n=m("button",{classes:["accordion__header"],attributes:{"aria-expanded":t.toString(),"aria-controls":`accordion-panel-${e.id}`,id:`accordion-header-${e.id}`,type:"button"},events:{click:s=>{s.preventDefault(),o&&o(e.id)}}}),a=m("span",{classes:["accordion__title"],text:e.title}),u=m("span",{classes:["accordion__icon"],attributes:{"aria-hidden":"true"}}),c=m("span",{classes:["accordion__icon-arrow"]});u.appendChild(c),n.appendChild(a),n.appendChild(u);let d=m("div",{classes:["accordion__panel"],attributes:{id:`accordion-panel-${e.id}`,"aria-labelledby":`accordion-header-${e.id}`,"aria-hidden":(!t).toString(),role:"region"}}),i=m("div",{classes:["accordion__content"]});if(typeof e.content=="string")i.innerHTML=e.content;else if(e.content instanceof HTMLElement)i.appendChild(e.content);else if(typeof e.content=="function"){let s=e.content();s instanceof HTMLElement&&i.appendChild(s)}else e.content&&typeof e.content.getElement=="function"&&i.appendChild(e.content.getElement());return d.appendChild(i),r.appendChild(n),r.appendChild(d),r},ta=e=>{Jn(po);let t=["accordion",e.variant&&`accordion--${e.variant}`,e.iconType&&e.iconType!=="content"&&`accordion--${e.iconType}`,e.className].filter(Boolean),o=m("div",{classes:t,attributes:{role:"region","aria-label":e.ariaLabel||"Accordion"}});return o._onToggle=e.onToggle,e.items.forEach(r=>{let n=e.expandedItems.includes(r.id),a=ea(r,n,o._onToggle,e.iconType);o.appendChild(a)}),o},oa=e=>{H(e,{items:{required:!0,type:"array",minLength:1,validator:a=>a.every(u=>u.id&&u.title)||"Each item must have an id and title"},iconType:{required:!1,type:"string",validator:a=>{let u=["content","arrow","chevron","plus-minus","caret","no-icon"];return u.includes(a)||`iconType must be one of: ${u.join(", ")}`}}},"Accordion");let t={items:e.items||[],expandedItems:e.defaultExpanded||[],multiple:e.multiple!==!1,variant:e.variant||"",iconType:e.iconType||"content",className:e.className||"",ariaLabel:e.ariaLabel||"",onChange:e.onChange||null};t.onToggle=a=>{let u=[...t.expandedItems];u.includes(a)?t.expandedItems=u.filter(d=>d!==a):t.multiple?t.expandedItems=[...u,a]:t.expandedItems=[a],o.update({expandedItems:t.expandedItems}),t.onChange&&t.onChange(t.expandedItems)};let o=q(ta)(t);o.expand=function(a){return t.expandedItems.includes(a)||t.onToggle(a),this},o.collapse=function(a){return t.expandedItems.includes(a)&&t.onToggle(a),this},o.expandAll=function(){if(t.multiple){let a=t.items.map(u=>u.id);t.expandedItems=a,this.update({expandedItems:a}),t.onChange&&t.onChange(a)}return this},o.collapseAll=function(){return t.expandedItems=[],this.update({expandedItems:[]}),t.onChange&&t.onChange([]),this},o.toggle=function(a){return t.onToggle(a),this},o.getExpandedItems=function(){return[...t.expandedItems]},o.setIconType=function(a){let u=["content","arrow","chevron","plus-minus","caret","no-icon"];return u.includes(a)?(t.iconType=a,this.update({iconType:a}),this):(console.warn(`Invalid iconType: ${a}. Valid types: ${u.join(", ")}`),this)};let r=o.update;o.update=function(a){if(a.items){t.items=a.items;let u=a.items.map(c=>c.id);t.expandedItems=t.expandedItems.filter(c=>u.includes(c)),a.expandedItems=t.expandedItems}return a.expandedItems!==void 0&&(t.expandedItems=a.expandedItems),a.onChange!==void 0&&(t.onChange=a.onChange),a.iconType!==void 0&&(t.iconType=a.iconType),a.variant!==void 0&&(t.variant=a.variant),r.call(this,a)};let n=o.destroy;return o.destroy=function(){let a=this.getElement();return a&&a.parentNode&&a.parentNode.removeChild(a),n.call(this)},o},ra=B(M("Accordion",oa)),De=ra;var na=De;function Q(e,t,o=!1){let r;return function(...a){let u=this,c=function(){r=null,o||e.apply(u,a)},d=o&&!r;clearTimeout(r),r=setTimeout(c,t),d&&e.apply(u,a)}}function qe(e,t){let o=0,r=null,n=null,a=null,u=function(){r&&(e.apply(n,r),o=Date.now(),r=n=null)};return function(...d){let i=Date.now(),s=t-(i-o);r=d,n=this,s<=0?(a&&(clearTimeout(a),a=null),o=i,e.apply(this,d),r=n=null):a||(a=setTimeout(u,s))}}function aa(e){let t=!1,o=null,r=null;return function(...a){o=a,r=this,t||(t=!0,requestAnimationFrame(()=>{e.apply(r,o),t=!1}))}}function ia(e,t=JSON.stringify){let o=new Map;return function(...n){let a=t(n);if(o.has(a))return o.get(a);let u=e.apply(this,n);return o.set(a,u),u}}function sa(e){requestAnimationFrame(()=>{e()})}function ca(e,t={timeout:1e3}){typeof window<"u"&&"requestIdleCallback"in window?window.requestIdleCallback(e,t):setTimeout(e,0)}var _e=class{constructor(t){this.componentName=t,this.metrics={renders:[],updates:[],events:[]},this.enabled=window&&window.localStorage&&window.localStorage.getItem("svarog-benchmark")==="true"}start(t){if(!this.enabled)return()=>{};let o=performance.now();return()=>{let n=performance.now()-o;return this.metrics[t]||(this.metrics[t]=[]),this.metrics[t].push(n),window.localStorage.getItem("svarog-benchmark-log")==="true"&&console.log(`${this.componentName} ${t}: ${n.toFixed(2)}ms`),n}}getSummary(){let t={};return Object.entries(this.metrics).forEach(([o,r])=>{if(r.length===0)return;let n=r.reduce((d,i)=>d+i,0),a=n/r.length,u=Math.min(...r),c=Math.max(...r);t[o]={count:r.length,average:a,min:u,max:c,total:n}}),t}reset(){Object.keys(this.metrics).forEach(t=>{this.metrics[t]=[]})}};var mo=T`
.back-to-top {
position: fixed;
bottom: var(--back-to-top-bottom, 2rem);
right: var(--back-to-top-right, 2rem);
z-index: var(--back-to-top-z-index, var(--z-index-fixed, 1030));
width: var(--back-to-top-size, 3rem);
height: var(--back-to-top-size, 3rem);
background: var(--back-to-top-bg, var(--color-primary, #3182ce));
color: var(--back-to-top-color, var(--color-text-white, #ffffff));
border: var(--back-to-top-border, none);
border-radius: var(--back-to-top-radius, 50%);
cursor: pointer;
opacity: 0;
visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: var(--back-to-top-transition, all 0.3s ease);
box-shadow: var(
--back-to-top-shadow,
var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1))
);
font-size: var(--back-to-top-icon-size, 1.25rem);
line-height: 1;
outline: none;
user-select: none;
}
.back-to-top--visible {
opacity: var(--back-to-top-visible-opacity, 1);
visibility: visible;
}
.back-to-top:hover {
background: var(--back-to-top-hover-bg, var(--color-primary-dark, #2c5aa0));
transform: var(--back-to-top-hover-transform, translateY(-2px));
box-shadow: var(
--back-to-top-hover-shadow,
var(--shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.1))
);
}
.back-to-top:active {
background: var(
--back-to-top-active-bg,
var(--color-primary-dark, #2c5aa0)
);
transform: var(--back-to-top-active-transform, translateY(0));
}
.back-to-top:focus {
outline: var(
--back-to-top-focus-outline,
2px solid var(--focus-ring-color, rgba(25, 118, 210, 0.25))
);
outline-offset: var(--back-to-top-focus-outline-offset, 2px);
}
.back-to-top--disabled {
opacity: var(--back-to-top-disabled-opacity, 0.6);
cursor: not-allowed;
pointer-events: none;
}
.back-to-top__icon {
transition: var(--back-to-top-icon-transition, transform 0.2s ease);
}
.back-to-top:hover .back-to-top__icon {
transform: var(--back-to-top-icon-hover-transform, scale(1.1));
}
/* Mobile responsive adjustments */
@media (max-width: 768px) {
.back-to-top {
bottom: var(--back-to-top-mobile-bottom, 1rem);
right: var(--back-to-top-mobile-right, 1rem);
width: var(--back-to-top-mobile-size, 2.5rem);
height: var(--back-to-top-mobile-size, 2.5rem);
font-size: var(--back-to-top-mobile-icon-size, 1rem);
}
}
/* Animation optimization */
@media (prefers-reduced-motion: reduce) {
.back-to-top,
.back-to-top__icon {
transition: none;
}
}
`;var la=L("backtotop"),fo=(e="\u2191")=>typeof e=="string"?m("span",{classes:["back-to-top__icon"],text:e}):e instanceof HTMLElement?(e.classList.add("back-to-top__icon"),e):m("span",{classes:["back-to-top__icon"],text:"\u2191"}),ho=(e,t)=>{!e||!t||(["top","right","bottom","left"].forEach(o=>{e.style[o]=""}),Object.entries(t).forEach(([o,r])=>{r!=null&&(e.style[o]=typeof r=="number"?`${r}px`:r)}))},bo=e=>e?e===window?window.pageYOffset||document.documentElement.scrollTop||0:e.scrollTop||0:0,go=(e,t,o)=>{let r=bo(e);if(r<=0){o?.();return}let n=performance.now(),a=c=>1-Math.pow(1-c,3),u=c=>{let d=c-n,i=Math.min(d/t,1),s=a(i),l=r*(1-s);e===window?window.scrollTo(0,l):e.scrollTop=l,i<1?requestAnimationFrame(u):o?.()};requestAnimationFrame(u)},da=e=>{la(mo);let t=fo(e.icon),o=["back-to-top",e.disabled?"back-to-top--disabled":"",e.className].filter(Boolean),r=m("button",{classes:o,attributes:{type:"button","aria-label":e.ariaLabel,"aria-hidden":"true",tabindex:e.disabled?"-1":"0"},children:[t]});return ho(r,e.position),r},ua=(e={})=>{H(e,{showAfter:{type:"number"},scrollDuration:{type:"number"},scrollTarget:{validator:l=>!l||l===window||l&&typeof l=="object"},icon:{validator:l=>!l||typeof l=="string"||l&&typeof l=="object"&&"classList"in l},ariaLabel:{type:"string"},position:{type:"object"},onClick:{type:"function"},onShow:{type:"function"},onHide:{type:"function"},className:{type:"string"},disabled:{type:"boolean"}},"BackToTop");let t={showAfter:e.showAfter||300,scrollDuration:e.scrollDuration||500,scrollTarget:e.scrollTarget||window,icon:e.icon||"\u2191",ariaLabel:e.ariaLabel||"Back to top",position:e.position||{bottom:"2rem",right:"2rem"},onClick:e.onClick||null,onShow:e.onShow||null,onHide:e.onHide||null,className:e.className||"",disabled:e.disabled||!1,isVisible:!1,isScrolling:!1},o=q(da)(t),r=null,n=null,a=!1,u=()=>{if(a||!t.scrollTarget||t.disabled)return;let p=bo(t.scrollTarget)>t.showAfter;p!==t.isVisible&&(t.isVisible=p,r&&(r.classList.toggle("back-to-top--visible",p),r.setAttribute("aria-hidden",(!p).toString())),p&&t.onShow?t.onShow():!p&&t.onHide&&t.onHide())},c=l=>{a||t.disabled||t.isScrolling||(l.preventDefault(),t.onClick&&t.onClick(l),t.scrollTarget&&(t.isScrolling=!0,go(t.scrollTarget,t.scrollDuration,()=>{t.isScrolling=!1})))},d=o.getElement;o.getElement=function(){return a?null:(r||(r=d.call(this),r.addEventListener("click",c),r.addEventListener("keydown",l=>{a||t.disabled||(l.key==="Enter"||l.key===" ")&&c(l)}),t.scrollTarget&&(n=qe(u,16),t.scrollTarget.addEventListener("scroll",n,{passive:!0})),setTimeout(u,0)),r)},o.show=function(){return a?this:(t.isVisible=!0,r&&(r.classList.add("back-to-top--visible"),r.setAttribute("aria-hidden","false")),t.onShow&&t.onShow(),this)},o.hide=function(){return a?this:(t.isVisible=!1,r&&(r.classList.remove("back-to-top--visible"),r.setAttribute("aria-hidden","true")),t.onHide&&t.onHide(),this)},o.scrollToTop=function(){return a||!t.scrollTarget||t.isScrolling?this:(t.isScrolling=!0,go(t.scrollTarget,t.scrollDuration,()=>{a||(t.isScrolling=!1)}),this)};let i=o.update;o.update=function(l){if(a)return console.warn("Attempted to update destroyed BackToTop component"),this;if(Object.assign(t,l),r){if(r.className=["back-to-top",t.disabled?"back-to-top--disabled":"",t.className||""].filter(Boolean).join(" "),r.setAttribute("aria-label",t.ariaLabel),r.setAttribute("tabindex",t.disabled?"-1":"0"),l.icon!==void 0){let p=fo(t.icon),f=r.querySelector(".back-to-top__icon");f&&r.replaceChild(p,f)}l.position&&ho(r,t.position)}return i.call(this,l)};let s=o.destroy;return o.destroy=function(){return a?this:(a=!0,n&&t.scrollTarget&&(t.scrollTarget.removeEventListener("scroll",n),n=null),r&&r.parentNode&&r.parentNode.removeChild(r),r=null,s.call(this))},o},pa=B(M("BackToTop",ua)),vo=pa;var ma=vo;var yo=T`
.blog-card {
display: flex;
flex-direction: column;
height: 100%;
transition:
transform 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.blog-card__image-container {
width: 100%;
padding-top: 56.25%; /* 16:9 aspect ratio */
position: relative;
overflow: hidden;
}
.blog-card__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.blog-card:hover .blog-card__image {
transform: scale(1.05);
}
.blog-card__title-link {
text-decoration: none;
color: inherit;
}
.blog-card__title-link:hover {
text-decoration: none;
}
.blog-card__title {
margin: 0 0 var(--space-2) 0;
font-size: var(--font-size-xl);
line-height: 1.3;
color: var(--color-text);
}
.blog-card__meta {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
.blog-card__author::after {
content: '•';
margin-left: var(--space-3);
}
.blog-card__excerpt {
margin: 0 0 var(--space-3) 0;
color: var(--color-text-light);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card__categories {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.blog-card__category {
display: inline-block;
padding: var(--space-1) var(--space-2);
background-color: var(--color-bg-secondary);
color: var(--color-text-light);
border-radius: var(--border-radius-sm);
font-size: var(--font-size-sm);
}
.blog-card__read-more {
margin-top: auto;
}
`;var xo=T`
/**
* Card component styles
*/
.card {
/* Base styling */
display: flex;
flex-direction: column;
background-color: var(--card-bg, var(--color-bg));
color: var(--card-color, var(--color-text));
border-radius: var(--card-radius, var(--border-radius-md));
overflow: hidden;
width: 100%;
box-sizing: border-box;
padding: var(--card-padding);
/* Default shadow/border state */
border: var(--card-border);
}
/* Card with elevation */
.card--elevated {
box-shadow: var(--card-shadow);
border-color: transparent;
}
/* Card with outline */
.card--outlined {
border-color: var(--card-border-color);
}
/* Card image */
.card__image {
display: block;
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: var(--card-image-margin-bottom);
}
/* Card title */
h3.card__title {
padding: var(--card-title-padding);
font-size: var(--card-title-font-size);
font-weight: var(--card-title-font-weight);
border-bottom: var(--card-title-border);
margin-bottom: var(--card-title-margin-bottom);
}
/* Card content */
.card__content {
flex-grow: 1;
padding: var(--card-content-padding);
}
/* Card footer */
.card__footer {
padding: var(--card-footer-padding);
margin-top: var(--card-footer-margin-top);
background-color: var(--card-footer-bg);
border-top: var(--card-footer-border);
font-size: var(--card-footer-font-size);
}
/* Card hover state */
.card:hover {
border-color: var(--card-hover-border-color);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.card__title {
padding: var(--card-title-padding-mobile);
}
.card__content {
padding: var(--card-content-padding-mobile);
}
.card__footer {
padding: var(--card-footer-padding-mobile);
}
}
`;var ga=L("Card"),fa=e=>{let t={...e};return"image"in e&&!("imageUrl"in e)&&!("imageElement"in e)&&(console.warn("[Card] image is deprecated, use imageUrl for strings or imageElement for DOM elements"),typeof e.image=="string"?t.imageUrl=e.image:t.imageElement=e.image,delete t.image),t},_o=e=>{ga(xo);let t=fa(e);if(!t.children)throw new Error("Card: children is required");let{children:o,title:r,imageUrl:n,imageElement:a,footer:u,outlined:c=!1,elevated:d=!1,className:i=""}=t,s=["card"];i&&s.push(i),c&&s.push("card--outlined"),d&&s.push("card--elevated");let l=m("div",{classes:s.join(" ")});if(n){let f=m("img",{classes:"card__image",attributes:{src:n,alt:r||"Card image"}});l.appendChild(f)}else a&&l.appendChild(a);if(r){let f=m("h3",{classes:"card__title",text:r});l.appendChild(f)}let p=m("div",{classes:"card__content"});if(typeof o=="string"?p.textContent=o:o instanceof Node?p.appendChild(o):Array.isArray(o)?W(p,o):typeof o=="object"&&o!==null&&typeof o.getElement=="function"&&p.appendChild(o.getElement()),l.appendChild(p),u){let f=m("div",{classes:"card__footer"});typeof u=="string"?f.textContent=u:u instanceof Node?f.appendChild(u):typeof u=="object"&&u!==null&&typeof u.getElement=="function"&&f.appendChild(u.getElement()),l.appendChild(f)}return{getElement(){return l},update(f){let g={...t,...f},h=_o(g);return l.parentNode&&l.parentNode.replaceChild(h.getElement(),l),h},destroy(){},onThemeChange(f,g){console.debug(`Card: theme changed from ${g} to ${f}`)}}},Ce=M("Card",B(_o));var wo=T`
.link {
align-items: baseline;
margin-left: var(--link-margin-left);
margin-right: var(--link-margin-right);
color: var(--link-color);
flex-shrink: 0;
transition: var(--link-transition);
cursor: pointer;
}
.link:hover {
color: var(--link-hover-color);
}
`;var ha=L("Link"),ko=e=>{ha(wo),e=(d=>({...d}))(e);let o=["_self","_blank","_parent","_top"];if(e.target&&!o.includes(e.target))throw new Error(`Invalid target: ${e.target}. Must be one of: ${o.join(", ")}`);if(e.underline!==void 0&&typeof e.underline!="boolean")throw new Error("underline must be a boolean");if(e.block!==void 0&&typeof e.block!="boolean")throw new Error("block must be a boolean");if(!e.children)throw new Error("children is required");if(!e.href)throw new Error("href is required");let c={...q(d=>{let i=["link",d.className].filter(Boolean),s={textDecoration:d.underline?"underline":"none",display:d.block?"block":"inline-flex"},l={href:d.href,target:d.target||"_self",id:d.id||null,rel:d.target==="_blank"?"noopener noreferrer":null},p={click:d.onClick},f=m("a",{attributes:l,classes:i,style:s,events:p});if(typeof d.children=="string")f.textContent=d.children;else if(d.children instanceof HTMLElement)f.appendChild(d.children);else if(typeof d.children.getElement=="function")f.appendChild(d.children.getElement());else throw new Error("Link children must be string, HTMLElement, or component with getElement method");return f})(e),shouldRerender:d=>{let i=["children","href","target","block"];return Object.keys(d).some(s=>i.includes(s))},partialUpdate:(d,i)=>{if(i.underline!==void 0&&(d.style.textDecoration=i.underline?"underline":"none"),i.className!==void 0){let s="link",l=i.className?[s,i.className]:[s];d.className=l.join(" ")}},setHref(d){return this.update({href:d})},setTarget(d){return this.update({target:d})},setUnderline(d){return this.update({underline:d})}};return c.onThemeChange=(d,i)=>{console.debug(`Link: theme changed from ${i} to ${d}`)},c};ko.requiredProps=["children","href"];var ge=ko;var ba=L("BlogCard"),Co=e=>{ba(yo);let o=(h=>{let I={...h};return"featuredImage"in h&&!("imageUrl"in h)&&(console.warn("[BlogCard] featuredImage is deprecated, use imageUrl instead"),I.imageUrl=h.featuredImage,delete I.featuredImage),I})(e);H(o,{title:{required:!0,type:"string"},slug:{required:!0,type:"string"},excerpt:{required:!1,type:"string"},imageUrl:{required:!1,type:"string"},publishedDate:{required:!1,type:"string"},author:{required:!1,type:"string"},categories:{required:!1,type:"array"},className:{required:!1,type:"string"}},"BlogCard");let{title:n,slug:a,excerpt:u="",imageUrl:c="",publishedDate:d="",author:i="",categories:s=[],className:l=""}=o,p=h=>h?new Date(h).toLocaleDateString("en-US",{year:"numeric",month:"long",day:"numeric"}):"",g=Ce({children:(()=>{let h=m("div",{classes:"blog-card__content"});if(c){let b=m("div",{classes:"blog-card__image-container"}),k=m("img",{classes:"blog-card__image",attributes:{src:c,alt:n||"",loading:"lazy"}});b.appendChild(k),h.appendChild(b)}let I=m("h3",{classes:"blog-card__title",text:n}),v=ge({children:I,href:`/blog/${a}`,block:!0,className:"blog-card__title-link"});h.appendChild(v.getElement());let _=m("div",{classes:"blog-card__meta"});if(i){let b=m("span",{classes:"blog-card__author",text:`By ${i}`});_.appendChild(b)}if(d){let b=m("span",{classes:"blog-card__date",text:p(d)});_.appendChild(b)}if(_.children.length>0&&h.appendChild(_),u){let b=m("p",{classes:"blog-card__excerpt",text:u});h.appendChild(b)}if(s.length>0){let b=m("div",{classes:"blog-card__categories"});s.forEach(k=>{let y=m("span",{classes:"blog-card__category",text:k});b.appendChild(y)}),h.appendChild(b)}let x=ge({children:"Read more \u2192",href:`/blog/${a}`,underline:!1,className:"blog-card__read-more"});return h.appendChild(x.getElement()),h})(),className:`blog-card ${l}`.trim()});return{getElement(){return g.getElement()},update(h){let I={...e,...h},v=Co(I),_=g.getElement();return _.parentNode&&_.parentNode.replaceChild(v.getElement(),_),v},destroy(){g.destroy()},onThemeChange(h,I){console.debug(`BlogCard: theme changed from ${I} to ${h}`)}}},Ue=M("BlogCard",B(Co));var va=Ue;var So=T`
.blog-detail {
max-width: 800px;
margin: 0 auto;
padding: var(--space-6) var(--space-4);
}
.blog-detail__header {
margin-bottom: var(--space-6);
text-align: center;
}
.blog-detail__title {
margin-bottom: var(--space-4);
font-size: var(--font-size-4xl);
line-height: 1.2;
}
.blog-detail__meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-3);
color: var(--color-text-light);
font-size: var(--font-size-sm);
}
.blog-detail__author::after {
content: '•';
margin-left: var(--space-3);
}
.blog-detail__categories {
display: flex;
align-items: center;
gap: var(--space-1);
}
.blog-detail__category {
color: var(--color-primary);
}
.blog-detail__image-container {
margin: var(--space-6) 0;
border-radius: var(--border-radius);
overflow: hidden;
}
.blog-detail__image {
width: 100%;
height: auto;
display: block;
}
.blog-detail__content {
font-size: var(--font-size-lg);
line-height: 1.7;
color: var(--color-text);
}
/* Content typography */
.blog-detail__content h2 {
margin-top: var(--space-8);
margin-bottom: var(--space-4);
font-size: var(--font-size-2xl);
}
.blog-detail__content h3 {
margin-top: var(--space-6);
margin-bottom: var(--space-3);
font-size: var(--font-size-xl);
}
.blog-detail__content p {
margin-bottom: var(--space-4);
}
.blog-detail__content a {
color: var(--color-primary);
text-decoration: underline;
}
.blog-detail__content a:hover {
color: var(--color-primary-dark);
}
.blog-detail__content img {
max-width: 100%;
height: auto;
margin: var(--space-6) 0;
border-radius: var(--border-radius);
}
.blog-detail__content blockquote {
border-left: 4px solid var(--color-primary);
padding-left: var(--space-4);
margin: var(--space-6) 0;
font-style: italic;
color: var(--color-text-light);
}
.blog-detail__content ul,
.blog-detail__content ol {
margin: var(--space-4) 0;
padding-left: var(--space-6);
}
.blog-detail__content li {
margin-bottom: var(--space-2);
}
.blog-detail__content code {
background-color: var(--color-bg-secondary);
padding: var(--space-1);
border-radius: var(--border-radius-sm);
font-family: var(--font-family-mono);
font-size: 0.9em;
}
.blog-detail__content pre {
background-color: var(--color-bg-secondary);
padding: var(--space-4);
border-radius: var(--border-radius);
overflow-x: auto;
margin: var(--space-6) 0;
}
.blog-detail__content pre code {
background-color: transparent;
padding: 0;
}
/* Error state */
.blog-detail--error {
padding: var(--space-4);
text-align: center;
color: var(--color-text-light);
border: 1px solid var(--color-error, #ff6b6b);
border-radius: var(--border-radius);
background-color: var(--color-error-bg, #fff5f5);
}
.blog-detail__content--error {
color: var(--color-error, #ff6b6b);
font-style: italic;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.blog-detail {
padding: var(--space-4) var(--space-3);
}
.blog-detail__title {
font-size: var(--font-size-3xl);
}
.blog-detail__content {
font-size: var(--font-size-base);
}
}
`;var ya=L("BlogDetail"),Eo=e=>{ya(So);let o=(n=>{let a={...n};return"featuredImage"in n&&!("imageUrl"in n)&&(console.warn("[BlogDetail] featuredImage is deprecated, use imageUrl instead"),a.imageUrl=n.featuredImage),a})(e),r={title:{required:!1,type:"string"},content:{required:!1,type:"string"},imageUrl:{required:!1,type:"string"},publishedDate:{required:!1,type:"string"},author:{required:!1,type:"string"},categories:{required:!1,type:"array"},className:{required:!1,type:"string"}};try{H(o,r,"BlogDetail");let{title:n="",content:a="",imageUrl:u="",publishedDate:c="",author:d="",categories:i=[],className:s=""}=o,l=v=>{if(!v)return"";try{return new Date(v).toLocaleDateString("en-US",{year:"numeric",month:"long",day:"numeric"})}catch(_){return console.error("BlogDetail: Error formatting date",_),""}},p=()=>{let v=document.createDocumentFragment(),_=m("article",{classes:`blog-detail ${s}`.trim()});try{let x=m("header",{classes:"blog-detail__header"});if(n){let k=m("h1",{classes:"blog-detail__title",text:n});x.appendChild(k)}let b=f();return b.children.length>0&&x.appendChild(b),_.appendChild(x),u&&_.appendChild(g()),_.appendChild(h()),v.appendChild(_),v.firstChild}catch(x){return console.error("BlogDetail: Error creating article element",x),m("article",{classes:"blog-detail blog-detail--error",text:"Error rendering blog content"})}},f=()=>{let v=m("div",{classes:"blog-detail__meta"});if(d){let _=m("span",{classes:"blog-detail__author",text:`By ${d}`});v.appendChild(_)}if(c){let _=m("span",{classes:"blog-detail__date",text:l(c)});v.appendChild(_)}if(i.length>0){let _=m("div",{classes:"blog-detail__categories"});i.forEach((x,b)=>{let k=m("span",{classes:"blog-detail__category",text:x});if(_.appendChild(k),b<i.length-1){let y=document.createTextNode(", ");_.appendChild(y)}}),v.appendChild(_)}return v},g=()=>{let v=m("div",{classes:"blog-detail__image-container"}),_=m("img",{classes:"blog-detail__image",attributes:{src:u,alt:n||"Blog featured image",loading:"lazy"}});return v.appendChild(_),v},h=()=>{try{return m("div",{classes:"blog-detail__content",html:a})}catch(v){return console.error("BlogDetail: Error rendering HTML content",v),m("div",{classes:"blog-detail__content blog-detail__content--error",text:"Error rendering blog content"})}},I=p();return{getElement(){return I},update(v){try{let _={...o,...v},x=Eo(_);return I.parentNode&&I.parentNode.replaceChild(x.getElement(),I),x}catch(_){return console.error("BlogDetail: Error updating component",_),this}},destroy(){},onThemeChange(v,_){console.debug(`BlogDetail: theme changed from ${_} to ${v}`)}}}catch(n){console.error("BlogDetail: Error creating component",n);let a=m("div",{classes:"blog-detail blog-detail--error",text:`Error creating BlogDetail: ${n.message}`});return{getElement:()=>a,update:()=>{},destroy:()=>{},onThemeChange:()=>{}}}},zo=M("BlogDetail",B(Eo));var xa=zo;var Io=T`
.blog-list {
padding: var(--space-6) 0;
}
.blog-list__title {
margin-bottom: var(--space-6);
text-align: center;
}
.blog-list__grid {
margin: 0 auto;
}
.blog-list__no-posts {
grid-column: 1 / -1;
text-align: center;
padding: var(--space-8) var(--space-4);
background-color: var(--color-bg-secondary);
border-radius: var(--border-radius);
color: var(--color-text-light);
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.blog-list__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.blog-list__grid {
grid-template-columns: 1fr;
}
.blog-list {
padding: var(--space-4) 0;
}
.blog-list__title {
margin-bottom: var(--space-4);
}
}
`;var xt=T`
/**
* Grid component styles using CSS Custom Properties
* No !important needed - clean cascade management
*/
/* Base Grid Styles */
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
width: 100%;
box-sizing: border-box;
}
/* Direction modifiers */
.grid--reverse {
direction: rtl;
}
.grid--mobile-reverse {
direction: ltr;
}
@media (max-width: 767px) {
.grid--mobile-reverse {
direction: rtl;
}
}
/* Column Styles with CSS Custom Properties */
.column {
box-sizing: border-box;
direction: ltr; /* Ensure content is always ltr even in rtl grids */
/* Default column span using CSS variable */
grid-column-end: span var(--col-width, 12);
}
/* Responsive column behavior using CSS variables */
/* Mobile (under 768px) */
@media (max-width: 767px) {
.column {
/* Use mobile width if set, otherwise fall back to default width */
grid-column-end: span var(--col-width-mobile, var(--col-width, 12));
}
}
/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
.column {
/* Use tablet width if set, otherwise fall back to default width */
grid-column-end: span var(--col-width-tablet, var(--col-width, 12));
}
}
/* Desktop (1024px and above) */
@media (min-width: 1024px) {
.column {
/* Use desktop width if set, otherwise fall back to default width */
grid-column-end: span var(--col-width-desktop, var(--col-width, 12));
/* Desktop offset if set */
grid-column-start: var(--col-offset-desktop, auto);
}
}
/* Utility classes */
.grid-fill-height {
height: 100%;
}
.grid-center-content {
align-items: center;
justify-items: center;
}
/* Container query support for future-proofing */
@supports (container-type: inline-size) {
.grid {
container-type: inline-size;
}
/* Container-based responsive design (when supported) */
@container (max-width: 767px) {
.column {
grid-column-end: span var(--col-width-mobile, var(--col-width, 12));
}
}
@container (min-width: 768px) and (max-width: 1023px) {
.column {
grid-column-end: s