@rimelight/ui 0.0.46 → 0.0.47

package/dist/icons-DPnFQCts.d.mts

@@ -0,0 +1,72 @@
+//#region src/icons.raw.d.ts
+declare const svg: (inner: string) => string;
+declare const ICONS: {
+  readonly alertTriangle: "<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"/><path d=\"M12 9v4M12 17h.01\"/>";
+  readonly alignLeft: "<line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\"/><line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\"/>";
+  readonly arrowLeft: "<path d=\"M19 12H5M12 19l-7-7 7-7\"/>";
+  readonly arrowRight: "<path d=\"M5 12h14M12 5l7 7-7 7\"/>";
+  readonly bell: "<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0\"/>";
+  readonly check: "<path d=\"M20 6 9 17l-5-5\"/>";
+  readonly chevronDown: "<path d=\"m6 9 6 6 6-6\"/>";
+  readonly chevronLeft: "<path d=\"m15 18-6-6 6-6\"/>";
+  readonly chevronRight: "<path d=\"m9 18 6-6-6-6\"/>";
+  readonly chevronsUpDown: "<path d=\"m7 15 5 5 5-5M7 9l5-5 5 5\"/>";
+  readonly circleCheck: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m9 12 2 2 4-4\"/>";
+  readonly circleX: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6M9 9l6 6\"/>";
+  readonly close: "<path d=\"M18 6 6 18M6 6l12 12\"/>";
+  readonly copy: "<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/>";
+  readonly download: "<path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\"/>";
+  readonly externalLink: "<path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3\"/>";
+  readonly fileQuestion: "<path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4M9.1 11.8a3 3 0 0 1 5.8 1c0 .9-.6 1.4-1.1 1.8-.4.3-.8.7-.8 1.4M12 19h.01\"/>";
+  readonly gripHorizontal: "<circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/>";
+  readonly gripVertical: "<circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>";
+  readonly hardDrive: "<rect width=\"20\" height=\"8\" x=\"2\" y=\"14\" rx=\"2\"/><path d=\"M6 18h.01M10 18h.01M2 14L5 3h14l3 11\"/>";
+  readonly image: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/>";
+  readonly imageUpscale: "<path d=\"M16 3H3v13h13V3z\"/><path d=\"M21 21v-4a2 2 0 0 0-2-2h-3M21 11V9M21 5a2 2 0 0 0-2-2h-1\"/>";
+  readonly info: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4M12 8h.01\"/>";
+  readonly layers: "<path d=\"m12 3-10 5L12 13l10-5-10-5Z\"/><path d=\"M2 17l10 5 10-5M2 12l10 5 10-5\"/>";
+  readonly list: "<line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\"/><line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\"/><line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\"/><line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\"/><line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\"/><line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\"/>";
+  readonly loaderCircle: "<path d=\"M21 12a9 9 0 1 1-6.219-8.56\"/>";
+  readonly moon: "<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"/>";
+  readonly panelLeft: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><path d=\"M9 3v18\"/>";
+  readonly play: "<polygon points=\"6 3 20 12 6 21 6 3\"/>";
+  readonly quote: "<path d=\"M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-3 6-3 6Zm11 0c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-3 6-3 6Z\"/>";
+  readonly search: "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>";
+  readonly share: "<circle cx=\"18\" cy=\"5\" r=\"3\"/><circle cx=\"6\" cy=\"12\" r=\"3\"/><circle cx=\"18\" cy=\"19\" r=\"3\"/><path d=\"m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98\"/>";
+  readonly sun: "<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"/>";
+  readonly uploadCloud: "<path d=\"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242M12 12v9M9 15l3-3 3 3\"/>";
+  readonly user: "<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>";
+  readonly star: "<polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>";
+  readonly lock: "<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>";
+  readonly eye: "<path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>";
+  readonly eyeOff: "<path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\"/><path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\"/><path d=\"M17.479 17.499A10.75 10.75 0 0 1 2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.225-4.22\"/><line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\"/>";
+  readonly arrowUp: "<path d=\"M12 19V5M5 12l7-7 7 7\"/>";
+  readonly arrowDown: "<path d=\"M12 5v14M19 12l-7 7-7-7\"/>";
+  readonly edit: "<path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>";
+  readonly link: "<path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/>";
+  readonly plus: "<path d=\"M5 12h14M12 5v14\"/>";
+  readonly trash: "<path d=\"M3 6h18M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"/>";
+  readonly fileText: "<path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"M10 9H8M16 13H8M16 17H8\"/>";
+  readonly settings: "<path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>";
+  readonly type: "<polyline points=\"4 7 4 4 20 4 20 7\"/><line x1=\"9\" x2=\"15\" y1=\"20\" y2=\"20\"/><line x1=\"12\" x2=\"12\" y1=\"4\" y2=\"20\"/>";
+  readonly code: "<polyline points=\"16 18 22 12 16 6\"/><polyline points=\"8 6 2 12 8 18\"/>";
+  readonly film: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M7 3v18M17 3v18M3 7h4M17 7h4M3 12h18M3 17h4M17 17h4\"/>";
+  readonly messageSquare: "<path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>";
+  readonly bookOpen: "<path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"/>";
+  readonly panelRight: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><path d=\"M15 3v18\"/>";
+  readonly pin: "<path d=\"M12 17v5\"/><path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\"/>";
+  readonly ellipsisVertical: "<circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/>";
+  readonly arrowUpFromLine: "<path d=\"m18 9-6-6-6 6\"/><path d=\"M12 3v14\"/><path d=\"M5 21h14\"/>";
+  readonly arrowDownToLine: "<path d=\"M12 17V3\"/><path d=\"m6 11 6 6 6-6\"/><path d=\"M5 21h14\"/>";
+};
+//#endregion
+//#region src/icons.d.ts
+declare const getSvgIcon: (k: string) => string;
+declare const DEFAULT_ICONS: Record<keyof typeof ICONS, string>;
+type RimelightIcons = Partial<Record<keyof typeof ICONS | (string & {}), string>>;
+declare const resolveIcon: (name?: string, custom?: string) => {
+  isClass: boolean;
+  content: string;
+};
+//#endregion
+export { ICONS as a, resolveIcon as i, RimelightIcons as n, svg as o, getSvgIcon as r, DEFAULT_ICONS as t };

package/dist/icons.d.mts

@@ -1,2 +1,2 @@
-import { a as ICONS, i as resolveIcon, n as RimelightIcons, o as svg, r as getSvgIcon, t as DEFAULT_ICONS } from "./icons--RzV1RTU.mjs";
+import { a as ICONS, i as resolveIcon, n as RimelightIcons, o as svg, r as getSvgIcon, t as DEFAULT_ICONS } from "./icons-DPnFQCts.mjs";
 export { DEFAULT_ICONS, ICONS, RimelightIcons, getSvgIcon, resolveIcon, svg };

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { c as UIConfig } from "./types-DqAgCNcm.mjs";
+import { c as UIConfig } from "./types-DWmKMcYC.mjs";
 //#region src/index.d.ts
 interface RimelightUIPlugin {
   name: string;

package/dist/preset.d.mts

@@ -1,2 +1,2 @@
-import { l as PALETTES, u as rimelightUiPreset } from "./types-DqAgCNcm.mjs";
+import { l as PALETTES, u as rimelightUiPreset } from "./types-DWmKMcYC.mjs";
 export { PALETTES, rimelightUiPreset as default };

package/dist/resolver.d.mts

@@ -1,4 +1,4 @@
-import { n as ClassValue, s as ThemeConfig } from "./types-DqAgCNcm.mjs";
+import { n as ClassValue, s as ThemeConfig } from "./types-DWmKMcYC.mjs";
 //#region src/resolver.d.ts
 declare function cx(...args: ClassValue[]): string;
 declare function defineTheme<const S extends string>(name: string, themeConfig: ThemeConfig<S>): (props?: any) => Record<S, string>;

package/dist/{types-DqAgCNcm.d.mts → types-DWmKMcYC.d.mts}

@@ -1,4 +1,4 @@
-import { n as RimelightIcons } from "./icons--RzV1RTU.mjs";
+import { n as RimelightIcons } from "./icons-DPnFQCts.mjs";
 import { Preset, UserConfig } from "unocss";
 //#region src/preset.d.ts
 declare const PALETTES: {

package/dist/types.d.mts

@@ -1,2 +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-DqAgCNcm.mjs";
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "private": false,
   "description": "Rimelight Entertainment's UI Package",
   "homepage": "https://rimelight.com/docs",
@@ -63,7 +63,7 @@
     "@astrojs/solid-js": "7.0.2",
     "@astrojs/ts-plugin": "1.10.11",
     "@astrojs/vue": "7.0.2",
-    "@rimelight/config": "0.0.4",
+    "@rimelight/config": "0.0.5",
     "astro": "7.3.1",
     "solid-js": "1.9.15",
     "typescript": "6.0.3",

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

package/src/components/link/RLALink.astro

@@ -25,7 +25,7 @@ const {
 const attrs = resolveLinkAttrs(Astro.props)
 
 const classes = raw
-  ? { root: (Astro.props.class as string) || "", leadingIcon: "", label: "", trailingIcon: "" }
+  ? { root: (Astro.props["class"] as string) || "", leadingIcon: "", label: "", trailingIcon: "" }
   : (linkTheme({
   theme,
         ...(active !== undefined ? { active } : {}),
@@ -34,7 +34,7 @@ const classes = raw
 ---
 
 <a
-  class={classes.root}
+  class={classes["root"]}
   data-slot="root"
   href={attrs.href}
   target={attrs.target}
@@ -48,21 +48,21 @@ const classes = raw
 >
   <slot name="leading">
     {leadingIcon && (
-      <span class={classes.leadingIcon} data-slot="leading-icon">
+      <span class={classes["leadingIcon"]} data-slot="leading-icon">
         <RLAIcon name={leadingIcon} size="sm" aria-hidden="true" />
       </span>
     )}
   </slot>
 
   {label !== undefined && label !== null ? (
-    <span class={classes.label} data-slot="label">{label}</span>
+    <span class={classes["label"]} data-slot="label">{label}</span>
   ) : (
     <slot />
   )}
 
   <slot name="trailing">
     {attrs.showTrailingIcon && (
-      <span class={classes.trailingIcon} data-slot="trailing-icon">
+      <span class={classes["trailingIcon"]} data-slot="trailing-icon">
         <RLAIcon
           name={attrs.showTrailingIcon}
           size="sm"

package/src/components/link/RLSLink.tsx

@@ -53,7 +53,7 @@ const RLSLink: Component<RLSLinkProps> = (allProps) => {
 
   return (
     <a
-      class={classes().root}
+      class={classes()["root"]}
       data-slot="root"
       href={attrs().href}
       target={attrs().target}
@@ -67,7 +67,7 @@ const RLSLink: Component<RLSLinkProps> = (allProps) => {
       {props.leading ? (
         props.leading
       ) : props.leadingIcon ? (
-        <span class={classes().leadingIcon} data-slot="leading-icon">
+        <span class={classes()["leadingIcon"]} data-slot="leading-icon">
           <RLSIcon name={props.leadingIcon} size="sm" aria-hidden="true" />
         </span>
       ) : null}
@@ -75,7 +75,7 @@ const RLSLink: Component<RLSLinkProps> = (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}
@@ -83,7 +83,7 @@ const RLSLink: Component<RLSLinkProps> = (allProps) => {
       {props.trailing ? (
         props.trailing
       ) : attrs().showTrailingIcon ? (
-        <span class={classes().trailingIcon} data-slot="trailing-icon">
+        <span class={classes()["trailingIcon"]} data-slot="trailing-icon">
           <RLSIcon name={attrs().showTrailingIcon!} size="sm" aria-hidden="true" />
         </span>
       ) : null}