@rimelight/ui 0.0.33 → 0.0.35

package/README.md

@@ -1,157 +1,158 @@
-# Rimelight UI (@rimelight/ui)
-
-[![Built with Astro](https://astro.badg.es/v2/built-with-astro/small.svg)](https://astro.build)  
-
-[![PLAYGROUND](https://img.shields.io/badge/PLAYGROUND-A682FF?style=for-the-badge&logo=astro&logoColor=white)](https://playground.rimelight.com/ui)  
-[![DOCUMENTATION](https://img.shields.io/badge/DOCUMENTATION-A682FF?style=for-the-badge&logo=astro&logoColor=white)](https://rimelight.com/company/docs/packages/rimelight-ui/)  
-
-[![NPM Version](https://img.shields.io/npm/v/@rimelight/ui?style=for-the-badge&logo=npm&logoColor=white&color=A682FF)](https://www.npmjs.com/package/@rimelight/ui)  
-[![NPM Downloads](https://img.shields.io/npm/dt/@rimelight/ui?style=for-the-badge&color=A682FF&logo=npm&logoColor=white)](https://www.npmjs.com/package/@rimelight/ui)  
-[![View on npmx](https://img.shields.io/badge/VIEW%20ON%20NPMX-A682FF?style=for-the-badge&logo=npm&logoColor=white)](https://npmx.dev/package/@rimelight/ui)  
-
-Rimelight UI is a comprehensive component library for [Astro](https://astro.build) websites used and maintained by [Rimelight Entertainment](https://rimelight.com).
-It offers a suite of accessible and highly performant components as [Astro Components](https://docs.astro.build/basics/astro-components/) and [Vue Components](https://vuejs.org), and is available as a free and open source project for any to use.
-
-## Features
-
-- **Multiple Frameworks**: Astro, Vue, and more with a unified usage pattern - use what suits your project best.
-- **Intuitive**: Simple APIs, comprehensive documentation, and convenient integrations.
-- **Accessible**: All components are WAI-ARIA compliant and include keyboard navigation, focus management, and
-  screen reader support.
-- **Customizable**: Create your own design system by overriding styles and variants globally or per instance.
-- **Performant**: Fully type-safe, SEO-friendly, modern and lean dependencies, and blazing fast.
-
-For a complete list of available components, refer to the [documentation](https://rimelight.com/company/docs/packages/rimelight-ui/).
-
-## Installation
-
-To use Rimelight UI in an Astro project, you need to install the package and add the integration.
-
-1. Install the package into your project:
-
-```bash
-# vp
-vp install @rimelight/ui
-
-# npm
-npm install @rimelight/ui
-
-# pnpm
-pnpm add @rimelight/ui
-
-# yarn
-yarn add @rimelight/ui
-
-# deno
-deno add npm:@rimelight/ui
-
-# bun
-bun add @rimelight/ui
-```
-
-2. Add the Rimelight UI Astro integration to your Astro configuration:
-
-```typescript
-// astro.config.ts
-import { ui } from "@rimelight/ui/integrations"
-import { defineConfig } from "astro/config"
-
-export default defineConfig({
-  integrations: [
-    ui({
-      // Optional: Provide global UI overrides
-      ui: {
-        button: {
-          defaultVariants: { variant: "primary" }
-        }
-      }
-    })
-  ]
-})
-```
-
-## Usage
-
-### Astro Components
-
-```astro
-// component.astro
-
----
-import { RLAButton } from '@rimelight/ui/components/astro/RLAButton.astro';
----
-
-<RLAButton label="Click Me" />
-```
-
-### Vue Components
-
-```vue
-// component.vue
-
-<script setup lang="ts">
-import { RLVButton } from "@rimelight/ui/components/vue/RLVButton.vue"
-</script>
-
-<template>
-  <RLVButton label="Click Me" />
-</template>
-```
-
-For mixed usage please refer to the [Astro documentation on using front-end frameworks](https://docs.astro.build/en/guides/framework-components/).
-
-You can add the FAQ section right toward the bottom of your README, typically just before the Contributing or Support sections.
-
-Since GitHub and most Markdown viewers natively support the <details> and <summary> HTML tags, they will render as interactive accordion dropdowns, keeping your README clean and compact.
-
-Here is the exact code block to drop into your Repository README:
-
-Markdown
-
-## Frequently Asked Questions
-
-<details>
-  <summary><b>Is Rimelight UI free to use?</b></summary>
-    Yes. Rimelight UI is a completely free and open source package under the <a href="./LICENSE">MIT License</a>.
-</details>
-
-<details>
-  <summary><b>Can I use Rimelight UI without Astro?</b></summary>
-    For the time being, no. The library is strictly distributed as an Astro integration. However, in theory, it could be modularized enough to be usable as a Vite plugin, and we are open to contributions on this topic.
-</details>
-
-<details>
-  <summary><b>Are other front-end frameworks supported?</b></summary>
-     For the time being, no. The library currently only offers Astro and Vue components, but in theory could support other front-end frameworks, and we welcome community contributions to expand this.
-</details>
-
-<details>
-  <summary><b>Is Rimelight UI customizable?</b></summary>
-    Yes. All components can have their styles overridden per slot and per variant, either globally via your <code>astro.config.ts</code> configuration or locally on an individual instance using the <code>ui</code> prop.
-</details>
-
-<details>
-  <summary><b>Is Rimelight UI accessible?</b></summary> 
-    Yes. All components provide automatic ARIA attributes, keyboard navigation, focus management, and screen reader support out of the box.
-</details>
-
-## Useful Links
-
-- [Starter Project](https://starter.rimelight.com)
-- [Playground](https://playground.rimelight.com/ui)
-- [Documentation](https://rimelight.com/company/docs/packages/rimelight-ui/)
-- [Changelog](https://rimelight.com/company/docs/packages/rimelight-ui/changelog/)
-
-## Contributing
-
-We welcome contributions to this project and its documentation. If you are interested in contributing, please refer to our [contribution guidelines](https://rimelight.com/company/docs/contributing/).
-
-If you would like to financially support this project, please consider [sponsoring us](https://rimelight.com/company/docs/contributing/sponsoring/).
-
-## Support
-
-If you have any questions or need assistance, please feel free to reach out to us at [support@rimelight.com](mailto:support@rimelight.com).
-
-## License
-
-MIT
+# Rimelight UI (@rimelight/ui)
+
+[![Built with Astro](https://astro.badg.es/v2/built-with-astro/small.svg)](https://astro.build) &nbsp;
+
+[![PLAYGROUND](https://img.shields.io/badge/PLAYGROUND-A682FF?style=for-the-badge&logo=astro&logoColor=white)](https://playground.rimelight.com/ui) &nbsp;
+[![DOCUMENTATION](https://img.shields.io/badge/DOCUMENTATION-A682FF?style=for-the-badge&logo=astro&logoColor=white)](https://rimelight.com/company/docs/packages/rimelight-ui/) &nbsp;
+
+[![NPM Version](https://img.shields.io/npm/v/@rimelight/ui?style=for-the-badge&logo=npm&logoColor=white&color=A682FF)](https://www.npmjs.com/package/@rimelight/ui) &nbsp;
+[![NPM Downloads](https://img.shields.io/npm/dt/@rimelight/ui?style=for-the-badge&color=A682FF&logo=npm&logoColor=white)](https://www.npmjs.com/package/@rimelight/ui) &nbsp;
+[![View on npmx](https://img.shields.io/badge/VIEW%20ON%20NPMX-A682FF?style=for-the-badge&logo=npm&logoColor=white)](https://npmx.dev/package/@rimelight/ui) &nbsp;
+[![pkg.pr.new](https://pkg.pr.new/badge/Rimelight-Entertainment/rimelight)](https://pkg.pr.new/~/Rimelight-Entertainment/rimelight) &nbsp;
+
+Rimelight UI is a comprehensive component library for [Astro](https://astro.build) websites used and maintained by [Rimelight Entertainment](https://rimelight.com).
+It offers a suite of accessible and highly performant components as [Astro Components](https://docs.astro.build/basics/astro-components/) and [Vue Components](https://vuejs.org), and is available as a free and open source project for any to use.
+
+## Features
+
+- **Multiple Frameworks**: Astro, Vue, and more with a unified usage pattern - use what suits your project best.
+- **Intuitive**: Simple APIs, comprehensive documentation, and convenient integrations.
+- **Accessible**: All components are WAI-ARIA compliant and include keyboard navigation, focus management, and
+  screen reader support.
+- **Customizable**: Create your own design system by overriding styles and variants globally or per instance.
+- **Performant**: Fully type-safe, SEO-friendly, modern and lean dependencies, and blazing fast.
+
+For a complete list of available components, refer to the [documentation](https://rimelight.com/company/docs/packages/rimelight-ui/).
+
+## Installation
+
+To use Rimelight UI in an Astro project, you need to install the package and add the integration.
+
+1. Install the package into your project:
+
+```bash
+# vp
+vp install @rimelight/ui
+
+# npm
+npm install @rimelight/ui
+
+# pnpm
+pnpm add @rimelight/ui
+
+# yarn
+yarn add @rimelight/ui
+
+# deno
+deno add npm:@rimelight/ui
+
+# bun
+bun add @rimelight/ui
+```
+
+2. Add the Rimelight UI Astro integration to your Astro configuration:
+
+```typescript
+// astro.config.ts
+import { ui } from "@rimelight/ui/integrations"
+import { defineConfig } from "astro/config"
+
+export default defineConfig({
+  integrations: [
+    ui({
+      // Optional: Provide global UI overrides
+      ui: {
+        button: {
+          defaultVariants: { variant: "primary" }
+        }
+      }
+    })
+  ]
+})
+```
+
+## Usage
+
+### Astro Components
+
+```astro
+// component.astro
+
+---
+import { RLAButton } from '@rimelight/ui/components/astro/RLAButton.astro';
+---
+
+<RLAButton label="Click Me" />
+```
+
+### Vue Components
+
+```vue
+// component.vue
+
+<script setup lang="ts">
+import { RLVButton } from "@rimelight/ui/components/vue/RLVButton.vue"
+</script>
+
+<template>
+  <RLVButton label="Click Me" />
+</template>
+```
+
+For mixed usage please refer to the [Astro documentation on using front-end frameworks](https://docs.astro.build/en/guides/framework-components/).
+
+You can add the FAQ section right toward the bottom of your README, typically just before the Contributing or Support sections.
+
+Since GitHub and most Markdown viewers natively support the <details> and <summary> HTML tags, they will render as interactive accordion dropdowns, keeping your README clean and compact.
+
+Here is the exact code block to drop into your Repository README:
+
+Markdown
+
+## Frequently Asked Questions
+
+<details>
+  <summary><b>Is Rimelight UI free to use?</b></summary>
+    Yes. Rimelight UI is a completely free and open source package under the <a href="./LICENSE">MIT License</a>.
+</details>
+
+<details>
+  <summary><b>Can I use Rimelight UI without Astro?</b></summary>
+    For the time being, no. The library is strictly distributed as an Astro integration. However, in theory, it could be modularized enough to be usable as a Vite plugin, and we are open to contributions on this topic.
+</details>
+
+<details>
+  <summary><b>Are other front-end frameworks supported?</b></summary>
+     For the time being, no. The library currently only offers Astro and Vue components, but in theory could support other front-end frameworks, and we welcome community contributions to expand this.
+</details>
+
+<details>
+  <summary><b>Is Rimelight UI customizable?</b></summary>
+    Yes. All components can have their styles overridden per slot and per variant, either globally via your <code>astro.config.ts</code> configuration or locally on an individual instance using the <code>ui</code> prop.
+</details>
+
+<details>
+  <summary><b>Is Rimelight UI accessible?</b></summary> 
+    Yes. All components provide automatic ARIA attributes, keyboard navigation, focus management, and screen reader support out of the box.
+</details>
+
+## Useful Links
+
+- [Starter Project](https://starter.rimelight.com)
+- [Playground](https://playground.rimelight.com/ui)
+- [Documentation](https://rimelight.com/company/docs/packages/rimelight-ui/)
+- [Changelog](https://rimelight.com/company/docs/packages/rimelight-ui/changelog/)
+
+## Contributing
+
+We welcome contributions to this project and its documentation. If you are interested in contributing, please refer to our [contribution guidelines](https://rimelight.com/company/docs/contributing/).
+
+If you would like to financially support this project, please consider [sponsoring us](https://rimelight.com/company/docs/contributing/sponsoring/).
+
+## Support
+
+If you have any questions or need assistance, please feel free to reach out to us at [support@rimelight.com](mailto:support@rimelight.com).
+
+## License
+
+MIT

package/package.json

@@ -1,105 +1,100 @@
-{
-  "name": "@rimelight/ui",
-  "version": "0.0.33",
-  "private": false,
-  "description": "Rimelight Entertainment UI Library.",
-  "keywords": [
-    "astro",
-    "typescript"
-  ],
-  "homepage": "https://rimelight.com/docs",
-  "bugs": {
-    "url": "https://github.com/Rimelight-Entertainment/rimelight/issues"
-  },
-  "license": "MIT",
-  "author": {
-    "name": "Daniel Marchi"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Rimelight-Entertainment/rimelight.git"
-  },
-  "files": [
-    "src",
-    "worker-configuration.d.ts",
-    "README.md",
-    "LICENSE"
-  ],
-  "type": "module",
-  "exports": {
-    ".": "./src/integrations/index.ts",
-    "./styles/*": "./src/styles/*",
-    "./components/*": "./src/components/*",
-    "./components/astro/*": "./src/components/astro/*",
-    "./components/vue/*": "./src/components/vue/*",
-    "./themes": "./src/themes/index.ts",
-    "./themes/*": "./src/themes/*",
-    "./composables": "./src/composables/index.ts",
-    "./composables/*": "./src/composables/*",
-    "./config": "./src/config/index.ts",
-    "./config/*": "./src/config/*",
-    "./utils": "./src/utils/index.ts",
-    "./utils/*": "./src/utils/*",
-    "./integrations": "./src/integrations/index.ts",
-    "./integrations/*": "./src/integrations/*",
-    "./plugins": "./src/plugins/index.ts",
-    "./plugins/*": "./src/plugins/*",
-    "./middleware": "./src/middleware/index.ts",
-    "./middleware/*": "./src/middleware/*",
-    "./types": "./src/types/index.ts",
-    "./types/*": "./src/types/*",
-    "./presets": "./src/presets/index.ts",
-    "./presets/*": "./src/presets/*",
-    "./*": "./src/*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "prepare": "vp config",
-    "knip": "knip",
-    "astro": "astro",
-    "docs:meta": "tsx scripts/extract-meta.ts"
-  },
-  "dependencies": {
-    "@astrojs/prism": "^4.0.2",
-    "@astrojs/vue": "7.0.0-alpha.0",
-    "prismjs": "^1.29.0",
-    "@iconify-json/lucide": "^1.2.109",
-    "@unocss/astro": "^66.7.0",
-    "css-variants": "2.3.5",
-    "defu": "6.1.7",
-    "embla-carousel": "8.6.0",
-    "nanostores": "1.3.0",
-    "picomatch": "^4.0.4",
-    "turndown": "^7.2.4",
-    "turndown-plugin-gfm": "^1.0.2",
-    "vite-plugin-virtual": "^0.5.0"
-  },
-  "devDependencies": {
-    "@astrojs/check": "0.9.9",
-    "@astrojs/ts-plugin": "1.10.9",
-    "@e18e/eslint-plugin": "0.5.0",
-    "@types/node": "25.9.1",
-    "@types/picomatch": "^4.0.3",
-    "@unocss/eslint-plugin": "66.7.0",
-    "astro": "7.0.0-alpha.0",
-    "eslint-plugin-regexp": "3.1.0",
-    "knip": "6.14.2",
-    "tsx": "4.22.3",
-    "typescript": "6.0.3",
-    "unocss": "66.7.0",
-    "vite-plus": "catalog:"
-  },
-  "peerDependencies": {
-    "@astrojs/starlight": ">=0.5.0",
-    "astro": ">=6.0.0",
-    "vue": ">=3.4.0"
-  },
-  "peerDependenciesMeta": {
-    "vue": {
-      "optional": true
-    }
-  },
-  "packageManager": "pnpm@11.3.0"
-}
+{
+  "name": "@rimelight/ui",
+  "version": "0.0.35",
+  "private": false,
+  "description": "Rimelight Entertainment UI Library.",
+  "keywords": [
+    "astro",
+    "typescript"
+  ],
+  "homepage": "https://rimelight.com/docs",
+  "bugs": {
+    "url": "https://github.com/Rimelight-Entertainment/rimelight/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Daniel Marchi"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Rimelight-Entertainment/rimelight.git"
+  },
+  "files": [
+    "src",
+    "worker-configuration.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./src/integrations/index.ts",
+    "./styles/*": "./src/styles/*",
+    "./components/*": "./src/components/*",
+    "./components/astro/*": "./src/components/astro/*",
+    "./components/vue/*": "./src/components/vue/*",
+    "./themes": "./src/themes/index.ts",
+    "./themes/*": "./src/themes/*",
+    "./composables": "./src/composables/index.ts",
+    "./composables/*": "./src/composables/*",
+    "./config": "./src/config/index.ts",
+    "./config/*": "./src/config/*",
+    "./utils": "./src/utils/index.ts",
+    "./utils/*": "./src/utils/*",
+    "./integrations": "./src/integrations/index.ts",
+    "./integrations/*": "./src/integrations/*",
+    "./docs": "./src/docs/extractAll.ts",
+    "./docs/*": "./src/docs/*",
+    "./plugins": "./src/plugins/index.ts",
+    "./plugins/*": "./src/plugins/*",
+    "./middleware": "./src/middleware/index.ts",
+    "./middleware/*": "./src/middleware/*",
+    "./types": "./src/types/index.ts",
+    "./types/*": "./src/types/*",
+    "./presets": "./src/presets/index.ts",
+    "./presets/*": "./src/presets/*",
+    "./*": "./src/*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "astro": "astro",
+    "docs:meta": "tsx scripts/extract-meta.ts"
+  },
+  "dependencies": {
+    "@astrojs/vue": "6.0.1",
+    "@iconify-json/lucide": "1.2.113",
+    "@unocss/astro": "^66.7.2",
+    "css-variants": "2.3.5",
+    "defu": "6.1.7",
+    "embla-carousel": "8.6.0",
+    "nanostores": "1.3.0",
+    "picomatch": "^4.0.4",
+    "vite-plugin-virtual": "^0.5.0",
+    "vue": "3.5.38"
+  },
+  "devDependencies": {
+    "@astrojs/check": "0.9.9",
+    "@astrojs/ts-plugin": "1.10.9",
+    "@e18e/eslint-plugin": "0.5.1",
+    "@types/node": "25.9.3",
+    "@types/picomatch": "^4.0.3",
+    "@unocss/eslint-plugin": "66.7.2",
+    "astro": "6.4.8",
+    "eslint-plugin-regexp": "3.1.0",
+    "tsx": "4.22.4",
+    "typescript": "6.0.3",
+    "unocss": "66.7.2",
+    "vite-plus": "0.2.1"
+  },
+  "peerDependencies": {
+    "@rimelight/i18n": "workspace:^0.0.1",
+    "astro": ">=6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@rimelight/i18n": {
+      "optional": true
+    }
+  },
+  "packageManager": "pnpm@11.8.0"
+}

package/src/components/astro/RLAAccordion.astro

@@ -1,18 +1,94 @@
----
-import type { AccordionProps } from "../../types";
-
-const { summary, class: className, ...attrs } = Astro.props as AccordionProps;
----
-
-<details class:list={['group', className]} {...attrs}>
-    <summary
-            class="accordion code flex cursor-pointer list-none items-center justify-between text-astro-gray-200"
-    >
-        <span>{summary}</span>
-        <span class="i-lucide-chevron s-4 rotate-0 transition-transform duration-300 ease-in-out group-open:-rotate-180" />
-    </summary>
-
-    <div class="pt-4">
-        <slot />
-    </div>
-</details>
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AccordionProps } from "../../types"
+import accordionThemeDefault, { createAccordionTheme } from "../../themes/accordion.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const accordionTheme = uiConfig.colors ? createAccordionTheme() : accordionThemeDefault
+const accordion = scv(accordionTheme)
+
+const {
+  items,
+  summary,
+  multiple = false,
+  trailingIcon = "i-lucide-chevron-down",
+  disabled = false,
+  name,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AccordionProps
+
+const classes = resolveClasses(accordion, {
+  disabled
+}, useUi("accordion", uiProp), className)
+
+// Generate a unique name for HTML details grouping if single-open mode (multiple=false) is active
+const groupName = name || (!multiple ? `accordion-${Math.random().toString(36).substring(2, 9)}` : undefined)
+---
+
+{items ? (
+  <div class={classes.root} data-slot="root" {...rest}>
+    {items.map((item) => {
+      const itemDisabled = disabled || item.disabled
+      const itemTrailingIcon = item.trailingIcon || trailingIcon
+      
+      return (
+        <details 
+          class={classes.item} 
+          data-slot="item" 
+          name={groupName}
+        >
+          <summary 
+            class={cx(classes.trigger, itemDisabled && "pointer-events-none opacity-50 select-none")} 
+            data-slot="trigger"
+          >
+            {item.icon && (
+              <span class={classes.leadingIcon} data-slot="leading-icon">
+                <span class={cx(item.icon)} aria-hidden="true" />
+              </span>
+            )}
+            
+            <span class={classes.label} data-slot="label">
+              {item.label}
+            </span>
+
+            {itemTrailingIcon && (
+              <span class={classes.trailingIcon} data-slot="trailing-icon">
+                <span class={cx(itemTrailingIcon)} aria-hidden="true" />
+              </span>
+            )}
+          </summary>
+
+          <div class={classes.content} data-slot="content">
+            <div class={classes.body} data-slot="body">
+              {item.content}
+            </div>
+          </div>
+        </details>
+      )
+    })}
+  </div>
+) : (
+  <details class:list={[classes.root, classes.item]} data-slot="root" name={name} {...rest}>
+    <summary 
+      class={cx(classes.trigger, disabled && "pointer-events-none opacity-50 select-none")} 
+      data-slot="trigger"
+    >
+      <span class={classes.label} data-slot="label">{summary}</span>
+      {trailingIcon && (
+        <span class={classes.trailingIcon} data-slot="trailing-icon">
+          <span class={cx(trailingIcon)} aria-hidden="true" />
+        </span>
+      )}
+    </summary>
+
+    <div class={classes.content} data-slot="content">
+      <div class={classes.body} data-slot="body">
+        <slot />
+      </div>
+    </div>
+  </details>
+)}