@rimelight/ui 0.0.45 → 0.0.47

package/dist/shortcuts.mjs

@@ -0,0 +1,119 @@
+import { atom } from "./stores.mjs";
+//#region src/shortcuts.ts
+const isMac = typeof navigator !== "undefined" && /Mac|iP/.test(navigator.userAgent);
+const KEYS = {
+	ctrl: "Ctrl",
+	meta: isMac ? "⌘" : "Ctrl",
+	alt: isMac ? "⌥" : "Alt",
+	shift: isMac ? "⇧" : "Shift",
+	enter: "↵",
+	delete: "⌦",
+	backspace: "⌫",
+	escape: "Esc",
+	tab: "⇥",
+	space: "Space",
+	arrowup: "↑",
+	arrowdown: "↓",
+	arrowleft: "←",
+	arrowright: "→"
+};
+const MODS = {
+	cmd: "meta",
+	command: "meta",
+	control: "ctrl",
+	opt: "alt",
+	option: "alt"
+};
+const normalizeModifier = (m) => MODS[m.toLowerCase()] || m.toLowerCase();
+const formatShortcutKeys = (k) => k.split(/[_-]/).map((p) => {
+	const norm = normalizeModifier(p);
+	return KEYS[norm] ?? (p ? p[0].toUpperCase() + p.slice(1) : "");
+});
+const activeShortcutsStore = atom([]);
+const isUsingInput = (el) => {
+	const target = el?.shadowRoot?.activeElement || el;
+	return target && (/INPUT|TEXTAREA|SELECT/.test(target.tagName) || target.isContentEditable) ? target.getAttribute("name") || true : false;
+};
+const isEnabled = (s, input) => s.usingInput === true || (s.usingInput ? input === s.usingInput : !input);
+const normalizeCombo = (combo) => {
+	const parts = combo.toLowerCase().split("_");
+	let meta = "";
+	let ctrl = "";
+	let alt = "";
+	let shift = "";
+	for (let i = 0; i < parts.length - 1; i++) {
+		const m = MODS[parts[i]] || parts[i];
+		if (m === "meta") meta = "meta_";
+		else if (m === "ctrl") ctrl = "ctrl_";
+		else if (m === "alt") alt = "alt_";
+		else if (m === "shift") shift = "shift_";
+	}
+	return `${meta}${ctrl}${alt}${shift}${parts[parts.length - 1] || ""}`;
+};
+function defineShortcuts(config, options = {}) {
+	if (typeof window === "undefined") return () => {};
+	const map = /* @__PURE__ */ new Map();
+	const reg = [];
+	for (const [k, cfg] of Object.entries(config)) {
+		if (!cfg) continue;
+		const obj = typeof cfg === "object" ? cfg : null;
+		const handler = obj ? obj.handler : cfg;
+		if (typeof handler !== "function") continue;
+		const key = k.includes("-") && k !== "-" && !k.includes("_") ? k.toLowerCase() : normalizeCombo(k);
+		map.set(key, {
+			handler,
+			usingInput: obj?.usingInput
+		});
+		if (obj?.label || obj?.description) reg.push({
+			id: `${obj.category || "system"}-${k}`,
+			keys: formatShortcutKeys(k),
+			category: obj.category || "system",
+			label: obj.label,
+			description: obj.description,
+			order: obj.order
+		});
+	}
+	const ids = new Set(reg.map((i) => i.id));
+	if (ids.size) activeShortcutsStore.set(activeShortcutsStore.get().filter((i) => !ids.has(i.id)).concat(reg));
+	const buffer = [];
+	let timer;
+	const onKeyDown = (e) => {
+		if (!e.key || e.isComposing) return;
+		const key = e.key === " " ? "space" : e.key.toLowerCase();
+		const codeKey = e.code ? e.code.replace(/^Key/, "").replace(/^Digit/, "").toLowerCase() : "";
+		const input = isUsingInput(typeof document !== "undefined" ? document.activeElement : null);
+		buffer.push(key);
+		if (buffer.length > 2) buffer.shift();
+		clearTimeout(timer);
+		if (buffer.length === 2) {
+			const chainedMatch = map.get(buffer.join("-"));
+			if (chainedMatch && isEnabled(chainedMatch, input)) {
+				e.preventDefault();
+				chainedMatch.handler(e);
+				buffer.length = 0;
+				return;
+			}
+		}
+		const keysToCheck = Array.from(new Set([key, codeKey].filter(Boolean)));
+		for (const k of keysToCheck) {
+			const sig = `${e.metaKey ? "meta_" : ""}${e.ctrlKey ? "ctrl_" : ""}${e.altKey ? "alt_" : ""}${e.shiftKey ? "shift_" : ""}${k}`;
+			const primarySig = !isMac && e.ctrlKey && !e.metaKey ? `meta_${e.altKey ? "alt_" : ""}${e.shiftKey ? "shift_" : ""}${k}` : sig;
+			const match = map.get(sig) || map.get(primarySig) || map.get(k);
+			if (match && isEnabled(match, input)) {
+				e.preventDefault();
+				match.handler(e);
+				buffer.length = 0;
+				return;
+			}
+		}
+		timer = setTimeout(() => void (buffer.length = 0), options.chainDelay ?? 800);
+	};
+	window.addEventListener("keydown", onKeyDown);
+	return () => {
+		window.removeEventListener("keydown", onKeyDown);
+		clearTimeout(timer);
+		if (ids.size) activeShortcutsStore.set(activeShortcutsStore.get().filter((i) => !ids.has(i.id)));
+	};
+}
+//#endregion
+export { activeShortcutsStore, defineShortcuts, formatShortcutKeys, normalizeModifier };

package/dist/stores.d.mts

@@ -0,0 +1,9 @@
+//#region src/stores.d.ts
+interface Atom<T> {
+  get: () => T;
+  set: (next: T) => void;
+  subscribe: (fn: (val: T) => void) => () => void;
+}
+declare function atom<T>(initial: T): Atom<T>;
+//#endregion
+export { Atom, atom };

package/dist/stores.mjs

@@ -0,0 +1,19 @@
+//#region src/stores.ts
+function atom(initial) {
+	let val = initial;
+	const subs = /* @__PURE__ */ new Set();
+	return {
+		get: () => val,
+		set: (next) => {
+			val = next;
+			subs.forEach((fn) => fn(val));
+		},
+		subscribe: (fn) => {
+			subs.add(fn);
+			fn(val);
+			return () => subs.delete(fn);
+		}
+	};
+}
+//#endregion
+export { atom };

package/dist/types-DWmKMcYC.d.mts

@@ -0,0 +1,86 @@
+import { n as RimelightIcons } from "./icons-DPnFQCts.mjs";
+import { Preset, UserConfig } from "unocss";
+//#region src/preset.d.ts
+declare const PALETTES: {
+  readonly neutral: readonly [0, 0];
+  readonly primary: readonly [0.21, 260];
+  readonly secondary: readonly [0.18, 70];
+  readonly info: readonly [0.24, 260];
+  readonly success: readonly [0.2, 150];
+  readonly warning: readonly [0.17, 86];
+  readonly error: readonly [0.24, 25];
+  readonly commentary: readonly [0.29, 322];
+  readonly ideation: readonly [0.28, 293];
+  readonly source: readonly [0.13, 215];
+};
+declare function rimelightUiPreset({ colors, icons, presets }?: UIConfig): Preset;
+//#endregion
+//#region src/types.d.ts
+type Theme = "light" | "dark";
+type BuiltinThemeColor = keyof typeof PALETTES;
+type ThemeColor = BuiltinThemeColor | (string & {});
+type ClassValue = string | number | boolean | undefined | null | {
+  [key: string]: any;
+} | ClassValue[];
+interface ThemeConfig<S extends string = string> {
+  slots?: readonly S[] | S[];
+  base?: Partial<Record<S, ClassValue>>;
+  variants?: Record<string, any>;
+  compoundVariants?: Array<Record<string, any> & {
+    classNames?: Partial<Record<S, ClassValue>>;
+    class?: Partial<Record<S, ClassValue>>;
+  }>;
+  defaultVariants?: Record<string, any>;
+}
+type ColorModeInput = [chroma: number, hue: number] | readonly [chroma: number, hue: number] | Record<string, string> | {
+  light?: Record<string, string>;
+  dark?: Record<string, string>;
+};
+interface PresetOptions {
+  /**
+   * Custom colors.
+   */
+  colors?: Record<string, ColorModeInput>;
+  /**
+   * Global icon overrides mapping icon names to class names (e.g. `i-lucide-x`) or raw SVG strings.
+   */
+  icons?: RimelightIcons;
+  /**
+   * Configure which built-in UnoCSS presets are enabled/disabled.
+   */
+  presets?: {
+    wind?: boolean;
+    typography?: boolean;
+    icons?: boolean;
+  };
+}
+interface UIConfig extends PresetOptions {
+  /**
+   * Whether to strip default theme classes from all components.
+   */
+  unstyled?: boolean;
+  /**
+   * Configuration for keyboard shortcuts.
+   */
+  shortcuts?: {
+    categories?: Record<string, {
+      label: string;
+    }>;
+  };
+  /**
+   * Configuration for the Logo component variants.
+   */
+  logos?: Record<string, string | Record<string, string | undefined>>;
+  /**
+   * Global component configuration overrides.
+   */
+  components?: {
+    themes?: Record<string, ThemeConfig<string>>;
+  };
+  /**
+   * Custom UnoCSS configuration overrides.
+   */
+  unocss?: UserConfig;
+}
+//#endregion
+export { Theme as a, UIConfig as c, PresetOptions as i, PALETTES as l, ClassValue as n, ThemeColor as o, ColorModeInput as r, ThemeConfig as s, BuiltinThemeColor as t, rimelightUiPreset as u };

package/dist/types.d.mts

@@ -0,0 +1,2 @@
+import { a as Theme, c as UIConfig, i as PresetOptions, n as ClassValue, o as ThemeColor, r as ColorModeInput, s as ThemeConfig, t as BuiltinThemeColor } from "./types-DWmKMcYC.mjs";
+export { BuiltinThemeColor, ClassValue, ColorModeInput, PresetOptions, Theme, ThemeColor, ThemeConfig, UIConfig };

package/dist/types.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "private": false,
   "description": "Rimelight Entertainment's UI Package",
   "homepage": "https://rimelight.com/docs",
@@ -16,31 +16,55 @@
     "url": "git+https://github.com/Rimelight-Entertainment/rimelight.git"
   },
   "files": [
+    "dist",
     "src"
   ],
   "type": "module",
   "exports": {
-    ".": "./src/index.ts",
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.mts",
+      "import": "./dist/preset.mjs"
+    },
+    "./resolver": {
+      "types": "./dist/resolver.d.mts",
+      "import": "./dist/resolver.mjs"
+    },
+    "./shortcuts": {
+      "types": "./dist/shortcuts.d.mts",
+      "import": "./dist/shortcuts.mjs"
+    },
+    "./stores": {
+      "types": "./dist/stores.d.mts",
+      "import": "./dist/stores.mjs"
+    },
+    "./types": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/types.mjs"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.mts",
+      "import": "./dist/icons.mjs"
+    },
     "./*": "./src/*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "astro": "astro",
-    "check": "vp check --fix && astro check"
-  },
   "dependencies": {
-    "@unocss/vite": "66.8.1",
-    "unocss": "66.8.1"
+    "@unocss/vite": "66.10.0",
+    "unocss": "66.10.0"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.10",
     "@astrojs/solid-js": "7.0.2",
     "@astrojs/ts-plugin": "1.10.11",
     "@astrojs/vue": "7.0.2",
-    "@rimelight/config": "workspace:*",
-    "astro": "7.2.9",
+    "@rimelight/config": "0.0.5",
+    "astro": "7.3.1",
     "solid-js": "1.9.15",
     "typescript": "6.0.3",
     "vue": "3.5.42"
@@ -69,5 +93,9 @@
   "engines": {
     "node": ">=26.7.0"
   },
-  "packageManager": "pnpm@12.0.0"
-}
+  "scripts": {
+    "build": "vp pack",
+    "astro": "astro",
+    "check": "vp check --fix && astro check"
+  }
+}

package/src/components/banner/RLABanner.astro

@@ -21,7 +21,7 @@ const classes = bannerTheme({
   sticky: fixed ? false : sticky
 })
 
-const bannerId = (rest.id as string) || `rla-banner-${Math.random().toString(36).slice(2, 8)}`
+const bannerId = (rest["id"] as string) || `rla-banner-${Math.random().toString(36).slice(2, 8)}`
 const storageKey = dismissId || bannerId
 ---
 

package/src/components/button/RLSButton.tsx

@@ -92,7 +92,7 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
         href={props.href}
         target={props.target}
         rel={props.rel || undefined}
-        class={classes().root}
+        class={classes()["root"]}
         data-slot="root"
         aria-label={props.ariaLabel}
         aria-disabled={props.disabled ? "true" : undefined}
@@ -102,7 +102,10 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
         {props.leading ? (
           props.leading
         ) : isLeading() && showLeadingIcon() ? (
-          <span class={`${classes().leadingIcon}  ${leadingIconClass()}`} data-slot="leading-icon">
+          <span
+            class={`${classes()["leadingIcon"]}  ${leadingIconClass()}`}
+            data-slot="leading-icon"
+          >
             <RLSIcon name={showLeadingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
           </span>
         ) : null}
@@ -110,7 +113,7 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
         {props.children !== undefined && props.children !== null ? (
           props.children
         ) : props.label !== undefined && props.label !== null ? (
-          <span class={classes().label} data-slot="label">
+          <span class={classes()["label"]} data-slot="label">
             {props.label}
           </span>
         ) : null}
@@ -119,7 +122,7 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
           props.trailing
         ) : isTrailing() && showTrailingIcon() ? (
           <span
-            class={`${classes().trailingIcon}  ${trailingIconClass()}`}
+            class={`${classes()["trailingIcon"]}  ${trailingIconClass()}`}
             data-slot="trailing-icon"
           >
             <RLSIcon name={showTrailingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
@@ -133,7 +136,7 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
     <button
       type={props.type || "button"}
       disabled={props.disabled}
-      class={classes().root}
+      class={classes()["root"]}
       data-slot="root"
       aria-label={props.ariaLabel}
       onClick={props.onClick}
@@ -142,7 +145,7 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
       {props.leading ? (
         props.leading
       ) : isLeading() && showLeadingIcon() ? (
-        <span class={`${classes().leadingIcon}  ${leadingIconClass()}`} data-slot="leading-icon">
+        <span class={`${classes()["leadingIcon"]}  ${leadingIconClass()}`} data-slot="leading-icon">
           <RLSIcon name={showLeadingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
         </span>
       ) : null}
@@ -150,7 +153,7 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
       {props.children !== undefined && props.children !== null ? (
         props.children
       ) : props.label !== undefined && props.label !== null ? (
-        <span class={classes().label} data-slot="label">
+        <span class={classes()["label"]} data-slot="label">
           {props.label}
         </span>
       ) : null}
@@ -158,7 +161,10 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
       {props.trailing ? (
         props.trailing
       ) : isTrailing() && showTrailingIcon() ? (
-        <span class={`${classes().trailingIcon}  ${trailingIconClass()}`} data-slot="trailing-icon">
+        <span
+          class={`${classes()["trailingIcon"]}  ${trailingIconClass()}`}
+          data-slot="trailing-icon"
+        >
           <RLSIcon name={showTrailingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
         </span>
       ) : null}

package/src/components/dashboard-sidebar/RLADashboardSidebar.astro

@@ -62,7 +62,7 @@ const classes = dashboardSidebarTheme({
     const sidebar = document.querySelector<HTMLElement>('[data-dashboard-sidebar]');
     if (!sidebar) return;
 
-    const collapsible = sidebar.dataset.collapsible === 'true';
+    const collapsible = sidebar.dataset["collapsible"] === 'true';
     const mobilePanel = document.querySelector<HTMLElement>('[data-dashboard-sidebar-mobile]');
     const overlay = document.querySelector<HTMLElement>('[data-dashboard-sidebar-overlay]');
 
@@ -91,8 +91,8 @@ const classes = dashboardSidebarTheme({
 
     const collapseSidebar = (val?: boolean) => {
       if (!collapsible) return;
-      const isCollapsed = val !== undefined ? val : sidebar.dataset.collapsed !== 'true';
-      sidebar.dataset.collapsed = isCollapsed ? 'true' : 'false';
+      const isCollapsed = val !== undefined ? val : sidebar.dataset["collapsed"] !== 'true';
+      sidebar.dataset["collapsed"] = isCollapsed ? 'true' : 'false';
       sidebar.setAttribute('data-collapsed', isCollapsed ? 'true' : 'false');
 
       document.querySelectorAll('[data-dashboard-toggle="collapse"]').forEach(btn => {
@@ -109,7 +109,7 @@ const classes = dashboardSidebarTheme({
       // Toggle buttons (mobile drawer + collapse)
       const toggle = target.closest<HTMLElement>('[data-dashboard-toggle]');
       if (toggle) {
-        const side = toggle.dataset.dashboardToggle;
+        const side = toggle.dataset["dashboardToggle"];
         if (side === 'mobile') toggleMobile();
         if (side === 'collapse') collapseSidebar();
         return;

package/src/components/dropdown-menu/RLADropdownMenu.astro

@@ -80,7 +80,7 @@ const itemGroups: DropdownMenuItem[][] = Array.isArray(items) && items.length >
                   data-slot="item"
                   data-dropdown-item
                   data-item-type={item.type}
-                  data-item-id={item.id || item.label}
+                  data-item-id={item["id"] || item["label"]}
                   data-item-action={item.label}
                   disabled={item.disabled}
                 >

package/src/components/file-upload/RLAFileUpload.astro

@@ -79,7 +79,7 @@ const inputId = `fileUpload-${Math.random().toString(36).slice(2, 9)}`
       const fileList = zone.querySelector("[data-fileUpload-filelist]") as HTMLElement | null;
       if (!input) return;
 
-      const isDisabled = zone.dataset.disabled === "true";
+      const isDisabled = zone.dataset["disabled"] === "true";
       if (isDisabled) return;
 
       const showFiles = (files: FileList | null) => {

package/src/components/header/HeaderLayer.astro

@@ -39,7 +39,7 @@ const classes = theme({
 })
 
 const isBanner = layerType === "banner"
-const layerId = rest.id || `rla-${componentName}-${Math.random().toString(36).slice(2, 8)}`
+const layerId = rest["id"] || `rla-${componentName}-${Math.random().toString(36).slice(2, 8)}`
 ---
 
 <Tag

package/src/components/input-menu/RLAInputMenu.astro

@@ -100,7 +100,7 @@ const initialLabel = selectedItem ? selectedItem.label : ""
       const onSearchInput = (e: Event) => {
         const q = (e.target as HTMLInputElement).value.toLowerCase();
         items.forEach(item => {
-          const label = (item as HTMLElement).dataset.label?.toLowerCase() || "";
+          const label = (item as HTMLElement).dataset["label"]?.toLowerCase() || "";
           if (label.includes(q)) {
             (item as HTMLElement).classList.remove("hidden");
           } else {
@@ -114,8 +114,8 @@ const initialLabel = selectedItem ? selectedItem.label : ""
       items.forEach(item => {
         const onItemClick = (e: MouseEvent) => {
           e.stopPropagation();
-          const val = (item as HTMLElement).dataset.value || "";
-          const label = (item as HTMLElement).dataset.label || "";
+          const val = (item as HTMLElement).dataset["value"] || "";
+          const label = (item as HTMLElement).dataset["label"] || "";
           
           if (hiddenInput) hiddenInput.value = val;
           if (valueSpan) valueSpan.textContent = label;

package/src/components/input-rating/RLAInputRating.astro

@@ -117,12 +117,12 @@ const ratingItems = Array.from({ length }, (_, idx) => {
       const input = this.querySelector('.rating-hidden-input') as HTMLInputElement | null
       const items = this.querySelectorAll('.input-rating-item') as NodeListOf<HTMLElement>
 
-      const step = parseFloat(this.dataset.step || '1')
-      const length = parseInt(this.dataset.length || '5')
-      const clearable = this.dataset.clearable === 'true'
-      const hoverable = this.dataset.hoverable === 'true'
-      const disabled = this.dataset.disabled === 'true'
-      const readonly = this.dataset.readonly === 'true'
+      const step = parseFloat(this.dataset["step"] || '1')
+      const length = parseInt(this.dataset["length"] || '5')
+      const clearable = this.dataset["clearable"] === 'true'
+      const hoverable = this.dataset["hoverable"] === 'true'
+      const disabled = this.dataset["disabled"] === 'true'
+      const readonly = this.dataset["readonly"] === 'true'
 
       if (disabled || readonly) return
 
@@ -130,7 +130,7 @@ const ratingItems = Array.from({ length }, (_, idx) => {
 
       function updateVisuals(val: number) {
         items.forEach((item) => {
-          const idx = parseInt(item.dataset.index || '0')
+          const idx = parseInt(item.dataset["index"] || '0')
           const indicator = item.querySelector('.rating-item-indicator') as HTMLElement | null
           if (indicator) {
             indicator.style.width = getWidthForVal(val, idx)
@@ -153,7 +153,7 @@ const ratingItems = Array.from({ length }, (_, idx) => {
       const clickListeners = new Map<HTMLElement, (e: MouseEvent) => void>()
 
       items.forEach((item) => {
-        const idx = parseInt(item.dataset.index || '0')
+        const idx = parseInt(item.dataset["index"] || '0')
 
         const onMouseMove = (event: MouseEvent) => {
           const val = getValueFromEvent(event, item, idx)

package/src/components/layout-grid/RLALayoutGrid.astro

@@ -136,7 +136,7 @@ const classes = layoutGridTheme(Astro.props)
       this.updateGrid()
 
       // Set up shortcuts using the library system
-      const shortcutKey = this.dataset.shortcut || 'meta_shift_g'
+      const shortcutKey = this.dataset["shortcut"] || 'meta_shift_g'
       this.shortcutsCleanup = defineShortcuts({
         [shortcutKey]: {
           handler: (e) => {
@@ -160,10 +160,10 @@ const classes = layoutGridTheme(Astro.props)
 
     private handleResize() {
       const width = document.documentElement.clientWidth
-      const smBreakpoint = parseInt(this.dataset.smBreakpoint || '640')
-      const mdBreakpoint = parseInt(this.dataset.mdBreakpoint || '768')
-      const lgBreakpoint = parseInt(this.dataset.lgBreakpoint || '1024')
-      const xlBreakpoint = parseInt(this.dataset.xlBreakpoint || '1280')
+      const smBreakpoint = parseInt(this.dataset["smBreakpoint"] || '640')
+      const mdBreakpoint = parseInt(this.dataset["mdBreakpoint"] || '768')
+      const lgBreakpoint = parseInt(this.dataset["lgBreakpoint"] || '1024')
+      const xlBreakpoint = parseInt(this.dataset["xlBreakpoint"] || '1280')
 
       let newBreakpoint: 'base' | 'sm' | 'md' | 'lg' | 'xl' = 'base'
 
@@ -185,57 +185,57 @@ const classes = layoutGridTheme(Astro.props)
       if (!this.columnsContainer) return
 
       const width = document.documentElement.clientWidth
-      const smBreakpoint = parseInt(this.dataset.smBreakpoint || '640')
-      const mdBreakpoint = parseInt(this.dataset.mdBreakpoint || '768')
-      const lgBreakpoint = parseInt(this.dataset.lgBreakpoint || '1024')
-      const xlBreakpoint = parseInt(this.dataset.xlBreakpoint || '1280')
+      const smBreakpoint = parseInt(this.dataset["smBreakpoint"] || '640')
+      const mdBreakpoint = parseInt(this.dataset["mdBreakpoint"] || '768')
+      const lgBreakpoint = parseInt(this.dataset["lgBreakpoint"] || '1024')
+      const xlBreakpoint = parseInt(this.dataset["xlBreakpoint"] || '1280')
 
       let breakpointIndex = 0
-      let colCount = parseInt(this.dataset.cols || '4')
+      let colCount = parseInt(this.dataset["cols"] || '4')
       let breakpointThreshold = 0
 
       switch (this.currentBreakpoint) {
         case 'xl':
           breakpointIndex = 4
-          colCount = parseInt(this.dataset.xlCols || '12')
+          colCount = parseInt(this.dataset["xlCols"] || '12')
           breakpointThreshold = xlBreakpoint
           break
         case 'lg':
           breakpointIndex = 3
-          colCount = parseInt(this.dataset.lgCols || '12')
+          colCount = parseInt(this.dataset["lgCols"] || '12')
           breakpointThreshold = lgBreakpoint
           break
         case 'md':
           breakpointIndex = 2
-          colCount = parseInt(this.dataset.mdCols || '8')
+          colCount = parseInt(this.dataset["mdCols"] || '8')
           breakpointThreshold = mdBreakpoint
           break
         case 'sm':
           breakpointIndex = 1
-          colCount = parseInt(this.dataset.smCols || '4')
+          colCount = parseInt(this.dataset["smCols"] || '4')
           breakpointThreshold = smBreakpoint
           break
         default:
           breakpointIndex = 0
-          colCount = parseInt(this.dataset.cols || '4')
+          colCount = parseInt(this.dataset["cols"] || '4')
           breakpointThreshold = 0
           break
       }
 
-      const gutterArray = JSON.parse(this.dataset.gutter || '[1,1,1,1,1]')
-      const marginArray = JSON.parse(this.dataset.margin || '[1,1,1,1,1]')
+      const gutterArray = JSON.parse(this.dataset["gutter"] || '[1,1,1,1,1]')
+      const marginArray = JSON.parse(this.dataset["margin"] || '[1,1,1,1,1]')
 
       const gutterValue = gutterArray[breakpointIndex] ?? gutterArray[gutterArray.length - 1]
       const marginValue = marginArray[breakpointIndex] ?? marginArray[marginArray.length - 1]
 
-      const gridColor = this.dataset.gridColor || '#ff0000'
-      const gridOpacity = parseFloat(this.dataset.gridOpacity || '0.1')
-      const showBackground = this.dataset.showBackground === 'true'
+      const gridColor = this.dataset["gridColor"] || '#ff0000'
+      const gridOpacity = parseFloat(this.dataset["gridOpacity"] || '0.1')
+      const showBackground = this.dataset["showBackground"] === 'true'
 
-      const showFullWidth = this.dataset.showFullWidth !== 'false'
-      const fullWidthColor = this.dataset.fullWidthColor || '#3b82f6'
-      const fullWidthOpacity = parseFloat(this.dataset.fullWidthOpacity || '0.05')
-      const showFullWidthBackground = this.dataset.showFullWidthBackground === 'true'
+      const showFullWidth = this.dataset["showFullWidth"] !== 'false'
+      const fullWidthColor = this.dataset["fullWidthColor"] || '#3b82f6'
+      const fullWidthOpacity = parseFloat(this.dataset["fullWidthOpacity"] || '0.05')
+      const showFullWidthBackground = this.dataset["showFullWidthBackground"] === 'true'
 
       // Convert rem spacings to pixels dynamically based on root font size
       const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
@@ -243,20 +243,20 @@ const classes = layoutGridTheme(Astro.props)
       const gutterPx = gutterValue * rootFontSize
 
       // Calculate max width boundaries
-      const maxWidthVal = this.dataset.maxWidth || '1440px'
+      const maxWidthVal = this.dataset["maxWidth"] || '1440px'
       let maxWidthPx = width
       if (!maxWidthVal.includes('vw')) {
         maxWidthPx = parseInt(maxWidthVal)
       }
 
-      const innerMaxWidthVal = this.dataset.innerMaxWidth || '768px'
+      const innerMaxWidthVal = this.dataset["innerMaxWidth"] || '768px'
       let innerMaxWidthPx = width
       if (!innerMaxWidthVal.includes('vw')) {
         innerMaxWidthPx = parseInt(innerMaxWidthVal)
       }
-      const innerGridColor = this.dataset.innerColor || '#10b981'
-      const innerGridOpacity = parseFloat(this.dataset.innerOpacity || '0.1')
-      const showInnerBackground = this.dataset.showInnerBackground === 'true'
+      const innerGridColor = this.dataset["innerColor"] || '#10b981'
+      const innerGridOpacity = parseFloat(this.dataset["innerOpacity"] || '0.1')
+      const showInnerBackground = this.dataset["showInnerBackground"] === 'true'
 
       // Calculate grid properties based on container width or screen width
       const activeWidth = width > maxWidthPx ? maxWidthPx : width