@rimelight/ui 0.0.25 → 0.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [

package/src/components/ThemeToggle.astro

@@ -2,13 +2,13 @@
 import RLAButton from "./astro/RLAButton.astro";
 
 export interface ThemeToggleProps {
-  class?: string;
   size?: "sm" | "md" | "lg";
+  class?: any;
 }
 
 type Props = ThemeToggleProps;
 
-const { class: className, size = "md" } = Astro.props as Props
+const { size = "md", class: className } = Astro.props as Props
 ---
 
 <RLAButton

package/src/components/astro/RLAButton.astro

@@ -1,7 +1,7 @@
 ---
 import { scv, cx } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import buttonTheme from "../../themes/button.theme"
 
 const button = scv(buttonTheme)
@@ -21,8 +21,8 @@ export interface RLAButtonProps {
   active?: boolean;
   activeColor?: ButtonVariants['color'];
   activeVariant?: ButtonVariants['variant'];
-  ui?: Partial<Record<string, string>>;
-  class?: string;
+  ui?: ComponentSlots<typeof buttonTheme>;
+  class?: any;
   [key: string]: unknown;
 }
 
@@ -30,8 +30,6 @@ const {
   variant = "solid",
   color = "primary",
   size = "md",
-  class: className,
-  ui: uiProp,
   href,
   label,
   leadingIcon,
@@ -42,6 +40,8 @@ const {
   active = false,
   activeColor,
   activeVariant,
+  ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLAButtonProps
 
@@ -75,7 +75,7 @@ const Tag = href ? "a" : "button";
 ---
 <Tag
   class={classes.root}
-  data-slot="rla-button"
+  data-slot="root"
   {...(Tag === "a" ? { href } : {})}
   {...rest}
 >

package/src/components/astro/RLAFooter.astro

@@ -1,7 +1,7 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import footerTheme from "../../themes/footer.theme"
 
 const footer = scv(footerTheme)
@@ -9,15 +9,15 @@ type FooterVariants = ComponentVariants<typeof footerTheme>
 
 export interface RLAFooterProps {
   contain?: FooterVariants['contain'];
-  ui?: Partial<Record<string, string>>;
-  class?: string;
+  ui?: ComponentSlots<typeof footerTheme>;
+  class?: any;
   [key: string]: unknown;
 }
 
 const {
   contain = false,
-  class: className,
   ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLAFooterProps
 
@@ -26,17 +26,17 @@ const classes = resolveClasses(footer, { contain }, useUi("footer", uiProp), cla
 
 <footer
   class:list={[classes.root]}
-  data-slot="rla-footer"
+  data-slot="root"
   {...rest}
 >
   <div class:list={[classes.container]}>
-    <div class:list={[classes.left]} data-slot="footer-left">
+    <div class:list={[classes.left]} data-slot="left">
       <slot name="left" />
     </div>
-    <div class:list={[classes.center]} data-slot="footer-center">
+    <div class:list={[classes.center]} data-slot="center">
       <slot name="center" />
     </div>
-    <div class:list={[classes.right]} data-slot="footer-right">
+    <div class:list={[classes.right]} data-slot="right">
       <slot name="right" />
     </div>
   </div>

package/src/components/astro/RLAHeader.astro

@@ -1,7 +1,7 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import headerTheme from "../../themes/header.theme"
 
 const header = scv(headerTheme)
@@ -13,8 +13,8 @@ export interface RLAHeaderProps {
   fixed?: HeaderVariants['fixed'];
   stackIndex?: number;
   hideOnScroll?: boolean;
-  ui?: Partial<Record<string, string>>;
-  class?: string;
+  ui?: ComponentSlots<typeof headerTheme>;
+  class?: any;
   [key: string]: unknown;
 }
 
@@ -24,8 +24,8 @@ const {
   fixed = false,
   stackIndex = 0,
   hideOnScroll = false,
-  class: className,
   ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLAHeaderProps;
 
@@ -41,6 +41,7 @@ const zIndex = 100 - stackIndex;
 
 <header
   id={headerId}
+  data-slot="root"
   class:list={[classes.root]}
   data-rla-header={fixed ? "true" : undefined}
   data-stack-index={stackIndex}
@@ -50,13 +51,13 @@ const zIndex = 100 - stackIndex;
 >
   <div class:list={[classes.content]} data-header-content>
     <div class:list={[classes.container]}>
-      <div class:list={[classes.left]} data-slot="header-left">
+      <div class:list={[classes.left]} data-slot="left">
         <slot name="left" />
       </div>
-      <div class:list={[classes.center]} data-slot="header-center">
+      <div class:list={[classes.center]} data-slot="center">
         <slot name="center" />
       </div>
-      <div class:list={[classes.right]} data-slot="header-right">
+      <div class:list={[classes.right]} data-slot="right">
         <slot name="right" />
       </div>
     </div>

package/src/components/astro/RLAIcon.astro

@@ -1,7 +1,7 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import iconTheme from "../../themes/icon.theme"
 
 const icon = scv(iconTheme)
@@ -10,16 +10,16 @@ type IconVariants = ComponentVariants<typeof iconTheme>
 export interface RLAIconProps {
   name: string
   size?: IconVariants['size']
-  class?: string
-  ui?: Partial<Record<string, string>>
+  ui?: ComponentSlots<typeof iconTheme>
+  class?: any
   [key: string]: unknown
 }
 
 const {
   name,
   size = "md",
-  class: className,
   ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLAIconProps
 
@@ -28,7 +28,7 @@ const classes = resolveClasses(icon, { size }, useUi("icon", uiProp), className)
 
 <span
   class={classes.root}
-  data-slot="rla-icon"
+  data-slot="root"
   aria-hidden="true"
   {...rest}
 >

package/src/components/astro/RLALogo.astro

@@ -1,6 +1,7 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
+import type { ComponentSlots } from "../../types"
 import logoTheme from "../../themes/logo.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
@@ -10,9 +11,9 @@ export interface RLALogoProps {
   variant?: string;
   mode?: "color" | "white" | "black";
   href?: string;
-  ui?: Partial<Record<string, string>>;
-  class?: string;
   alt?: string;
+  ui?: ComponentSlots<typeof logoTheme>;
+  class?: any;
   [key: string]: unknown;
 }
 
@@ -20,9 +21,9 @@ const {
   variant = "logomark",
   mode,
   href = "/",
-  class: className,
-  ui: uiProp,
   alt,
+  ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLALogoProps;
 
@@ -50,7 +51,7 @@ const isIcon = logoSrc && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
   class={classes.root}
   href={href}
   aria-label={alt || variant}
-  data-slot="rla-logo"
+  data-slot="root"
   {...rest}
 >
   {logoSrc ? (

package/src/components/astro/RLAPlaceholder.astro

@@ -1,19 +1,20 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
+import type { ComponentSlots } from "../../types"
 import placeholderTheme from "../../themes/placeholder.theme"
 
 const placeholder = scv(placeholderTheme)
 
 export interface RLAPlaceholderProps {
-  ui?: Partial<Record<string, string>>
-  class?: string
+  ui?: ComponentSlots<typeof placeholderTheme>
+  class?: any
   [key: string]: unknown
 }
 
 const {
-  class: className,
   ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLAPlaceholderProps
 

package/src/components/astro/RLAScrollToTop.astro

@@ -1,7 +1,7 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import scrollToTopTheme from "../../themes/scroll-to-top.theme"
 
 const scrollToTop = scv(scrollToTopTheme)
@@ -13,8 +13,8 @@ export interface RLAScrollToTopProps {
   duration?: number;
   threshold?: number;
   showProgress?: boolean;
-  ui?: Partial<Record<string, string>>;
-  class?: string;
+  ui?: ComponentSlots<typeof scrollToTopTheme>;
+  class?: any;
   [key: string]: unknown;
 }
 

package/src/components/astro/RLASection.astro

@@ -1,181 +1,210 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
-import sectionTheme from "../../themes/section.theme"
-
-const section = scv(sectionTheme)
-type SectionVariants = ComponentVariants<typeof sectionTheme>
-
-export interface RLASectionProps {
-  as?: string;
-  variant?: SectionVariants['variant'];
-  headline?: string;
-  icon?: string;
-  title?: string;
-  description?: string;
-  orientation?: SectionVariants['orientation'];
-  reverse?: boolean;
-  ctaVariant?: SectionVariants['ctaVariant'];
-  ui?: Partial<Record<string, string>>;
-  class?: string;
-  [key: string]: unknown;
-}
-
-const {
-  as = "section",
-  variant = "default",
-  orientation = "vertical",
-  reverse = false,
-  ctaVariant = "outline",
-  class: className,
-  ui: uiProp,
-  ...rest
-} = Astro.props as RLASectionProps;
-
-const classes = resolveClasses(section, {
-  variant,
-  orientation,
-  reverse,
-  ...(variant === "cta" && { ctaVariant }),
-  headline: Astro.slots.has("headline") || Astro.props.headline,
-  title: Astro.slots.has("title") || Astro.props.title,
-  description: Astro.slots.has("description") || Astro.props.description,
-  body: Astro.slots.has("body") || Astro.slots.has("features")
-}, useUi("section", uiProp), className);
-
-const Tag = as;
----
-
-<Tag
-  data-orientation={orientation}
-  data-slot="rla-section"
-  class:list={[classes.root]}
-  {...rest}
->
-  <slot name="background">
-    {Astro.slots.has("background") && (
-      <div class:list={[classes.background]} data-slot="background">
-        <slot name="background" />
-      </div>
-    )}
-  </slot>
-
-  <slot name="top" />
-
-  <div
-    data-slot="container"
-    class:list={[classes.container]}
-  >
-    {(Astro.slots.has("header") || Astro.props.icon || Astro.props.headline || Astro.props.title || Astro.props.description || Astro.slots.has("body") || Astro.slots.has("footer") || Astro.slots.has("links") || Astro.slots.has("features")) && (
-      <div
-        data-slot="wrapper"
-        class:list={[classes.wrapper]}
-      >
-        {(Astro.slots.has("header") || Astro.props.icon || Astro.props.headline || Astro.props.title || Astro.props.description) && (
-          <div
-            data-slot="header"
-            class:list={[classes.header]}
-          >
-            <slot name="header">
-              {(Astro.props.icon || Astro.slots.has("leading")) && (
-                <div
-                  data-slot="leading"
-                  class:list={[classes.leading]}
-                >
-                  <slot name="leading" {...{ ui: classes }}>
-                    {Astro.props.icon && (
-                      <span
-                        class:list={[classes.leadingIcon]}
-                        data-slot="leading-icon"
-                      >
-                        <span class={Astro.props.icon} aria-hidden="true" />
-                      </span>
-                    )}
-                  </slot>
-                </div>
-              )}
-
-              {(Astro.props.headline || Astro.slots.has("headline")) && (
-                <div
-                  data-slot="headline"
-                  class:list={[classes.headline]}
-                >
-                  <slot name="headline">
-                    {Astro.props.headline}
-                  </slot>
-                </div>
-              )}
-
-              {(Astro.props.title || Astro.slots.has("title")) && (
-                <component
-                  is={variant === "hero" ? "h1" : "h2"}
-                  data-slot="title"
-                  class:list={[classes.title]}
-                >
-                  <slot name="title">
-                    {Astro.props.title}
-                  </slot>
-                </component>
-              )}
-
-              {(Astro.props.description || Astro.slots.has("description")) && (
-                <div
-                  data-slot="description"
-                  class:list={[classes.description]}
-                >
-                  <slot name="description">
-                    {Astro.props.description}
-                  </slot>
-                </div>
-              )}
-            </slot>
-          </div>
-        )}
-
-        {(Astro.slots.has("body") || Astro.slots.has("features")) && (
-          <div
-            data-slot="body"
-            class:list={[classes.body]}
-          >
-            <slot name="body">
-              {Astro.slots.has("features") && (
-                <ul
-                  data-slot="features"
-                  class:list={[classes.features]}
-                >
-                  <slot name="features" />
-                </ul>
-              )}
-            </slot>
-          </div>
-        )}
-
-        {(Astro.slots.has("footer") || Astro.slots.has("links")) && (
-          <div
-            data-slot="footer"
-            class:list={[classes.footer]}
-          >
-            <slot name="footer">
-              {Astro.slots.has("links") && (
-                <div
-                  data-slot="links"
-                  class:list={[classes.links]}
-                >
-                  <slot name="links" />
-                </div>
-              )}
-            </slot>
-          </div>
-        )}
-      </div>
-    )}
-
-    <slot />
-    {orientation === "horizontal" && (
-      <div class="hidden lg:block" />
-    )}
-  </div>
-
-  <slot name="bottom" />
-</Tag>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants, ComponentSlots } from "../../types"
+import sectionTheme from "../../themes/section.theme"
+import type { RLAIconProps } from "./RLAIcon.astro"
+import type { RLAButtonProps } from "./RLAButton.astro"
+import RLAIcon from "./RLAIcon.astro"
+import RLAButton from "./RLAButton.astro"
+
+const section = scv(sectionTheme)
+type SectionVariants = ComponentVariants<typeof sectionTheme>
+
+export interface RLASectionProps {
+  /**
+   * The element or component this component should render as.
+   * @default 'section'
+   */
+  as?: any;
+  /**
+   * The variant of the section.
+   * @default 'default'
+   */
+  variant?: SectionVariants['variant'];
+  /** The variant of the section when it's a CTA.
+   * @default 'solid'
+   */
+  ctaVariant?: SectionVariants['ctaVariant'];
+  /**
+   * The headline displayed above the title.
+   */
+  headline?: string;
+  /**
+   * The icon displayed above the title.
+   */
+  icon?: RLAIconProps["name"];
+  /**
+   * The section's title, displayed as a <h1> for the hero variant or <h2> otherwise.
+   */
+  title?: string;
+  /**
+   * The section's description, displayed under the title.
+   */
+  description?: string;
+  /**
+   * Display a list of buttons under the description.
+   */
+  links?: RLAButtonProps[]
+  /**
+   * The orientation of the section.
+   * @default 'vertical'
+   */
+  orientation?: SectionVariants['orientation'];
+  /**
+   * Reverse the order of the default slot.
+   * @default false
+   */
+  reverse?: boolean;
+  ui?: ComponentSlots<typeof sectionTheme>;
+  class?: any;
+  [key: string]: unknown;
+}
+
+const {
+  as = "section",
+  variant = "default",
+  orientation = "vertical",
+  reverse = false,
+  ctaVariant = "solid",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RLASectionProps;
+
+const classes = resolveClasses(section, {
+  variant,
+  orientation,
+  reverse,
+  ...(variant === "cta" && { ctaVariant }),
+  headline: !!(Astro.slots.has("headline") || Astro.props.headline),
+  title: !!(Astro.slots.has("title") || Astro.props.title),
+  description: !!(Astro.slots.has("description") || Astro.props.description),
+  body: Astro.slots.has("body")
+}, useUi("section", uiProp), className);
+
+const hasDefaultSlot = Astro.slots.has("default");
+
+const Tag = as;
+const TitleTag = variant === "hero" ? "h1" : "h2";
+---
+
+<Tag
+  data-orientation={orientation}
+  data-slot="root"
+  class:list={[classes.root]}
+  {...rest}
+>
+  {Astro.slots.has("background") && (
+    <div class:list={[classes.background]} data-slot="background">
+      <slot name="background" />
+    </div>
+  )}
+
+  <slot name="top" />
+
+  <div
+    data-slot="container"
+    class:list={[classes.container]}
+  >
+    {(Astro.slots.has("header") || Astro.props.icon || Astro.props.headline || Astro.props.title || Astro.props.description || Astro.slots.has("body") || Astro.slots.has("footer") || Astro.slots.has("links") || Astro.props.links?.length) && (
+      <div
+        data-slot="wrapper"
+        class:list={[classes.wrapper]}
+      >
+        {(Astro.slots.has("header") || Astro.props.icon || Astro.props.headline || Astro.props.title || Astro.props.description) && (
+          <div
+            data-slot="header"
+            class:list={[classes.header]}
+          >
+            <slot name="header">
+              {(Astro.props.icon || Astro.slots.has("leading")) && (
+                <div
+                  data-slot="leading"
+                  class:list={[classes.leading]}
+                >
+                  <slot name="leading" {...{ ui: classes }}>
+                    {Astro.props.icon && (
+                      <RLAIcon name={Astro.props.icon} size="md" ui={{ root: classes.leadingIcon }} />
+                    )}
+                  </slot>
+                </div>
+              )}
+
+              {(Astro.props.headline || Astro.slots.has("headline")) && (
+                <div
+                  data-slot="headline"
+                  class:list={[classes.headline]}
+                >
+                  <slot name="headline">
+                    {Astro.props.headline}
+                  </slot>
+                </div>
+              )}
+
+              {(Astro.props.title || Astro.slots.has("title")) && (
+                <TitleTag
+                  data-slot="title"
+                  class:list={[classes.title]}
+                >
+                  <slot name="title">
+                    {Astro.props.title}
+                  </slot>
+                </TitleTag>
+              )}
+
+              {(Astro.props.description || Astro.slots.has("description")) && (
+                <div
+                  data-slot="description"
+                  class:list={[classes.description]}
+                >
+                  <slot name="description">
+                    {Astro.props.description}
+                  </slot>
+                </div>
+              )}
+            </slot>
+          </div>
+        )}
+
+        {Astro.slots.has("body") && (
+          <div
+            data-slot="body"
+            class:list={[classes.body]}
+          >
+            <slot name="body" />
+          </div>
+        )}
+
+        {(Astro.slots.has("footer") || Astro.slots.has("links") || Astro.props.links?.length) && (
+          <div
+            data-slot="footer"
+            class:list={[classes.footer]}
+          >
+            <slot name="footer">
+              {(Astro.props.links?.length || Astro.slots.has("links")) && (
+                <div
+                  data-slot="links"
+                  class:list={[classes.links]}
+                >
+                  {Astro.props.links?.map((link) => (
+                    <RLAButton size="lg" {...link} />
+                  ))}
+                  <slot name="links" />
+                </div>
+              )}
+            </slot>
+          </div>
+        )}
+      </div>
+    )}
+
+    {hasDefaultSlot ? (
+      <slot />
+    ) : orientation === "horizontal" ? (
+      <div class="hidden lg:block" />
+    ) : null}
+  </div>
+
+  <slot name="bottom" />
+</Tag>

package/src/components/vue/RLVButton.vue

@@ -2,7 +2,7 @@
 import { computed, useSlots } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import buttonTheme from "../../themes/button.theme"
 
 const button = scv(buttonTheme)
@@ -64,8 +64,8 @@ export interface RLVButtonProps {
   /**
    * Component-specific CSS class overrides
    */
-  ui?: Partial<Record<string, string>>
-  class?: string
+  ui?: ComponentSlots<typeof buttonTheme>
+  class?: any
   [key: string]: unknown
 }
 
@@ -73,8 +73,6 @@ const {
   variant = "solid",
   color = "primary",
   size = "md",
-  class: className,
-  ui: uiProp,
   href,
   label,
   leadingIcon,
@@ -84,7 +82,9 @@ const {
   block = false,
   active = false,
   activeColor,
-  activeVariant
+  activeVariant,
+  ui: uiProp,
+  class: className
 } = defineProps<RLVButtonProps>()
 
 const slots = useSlots()
@@ -141,13 +141,7 @@ const Tag = href ? "a" : "button"
 </script>
 
 <template>
-  <component
-    v-bind="$attrs"
-    :is="Tag"
-    :href="href"
-    :class="resolvedClasses.root"
-    data-slot="rlv-button"
-  >
+  <component v-bind="$attrs" :is="Tag" :href="href" :class="resolvedClasses.root" data-slot="root">
     <slot name="leading" :ui="resolvedClasses">
       <span v-if="isLeading" :class="resolvedClasses.leadingIcon" data-slot="leading-icon">
         <span :class="[showLeadingIcon, leadingIconClass]" aria-hidden="true" />

package/src/components/vue/RLVFooter.vue

@@ -2,7 +2,7 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import footerTheme from "../../themes/footer.theme"
 
 const footer = scv(footerTheme)
@@ -10,11 +10,11 @@ type FooterVariants = ComponentVariants<typeof footerTheme>
 
 export interface RLVFooterProps {
   contain?: FooterVariants["contain"]
-  ui?: Partial<Record<string, string>>
-  class?: string
+  ui?: ComponentSlots<typeof footerTheme>
+  class?: any
 }
 
-const { contain = false, class: className, ui: uiProp } = defineProps<RLVFooterProps>()
+const { contain = false, ui: uiProp, class: className } = defineProps<RLVFooterProps>()
 
 defineSlots<{
   left(props: {}): any
@@ -28,15 +28,15 @@ const resolvedClasses = computed(() =>
 </script>
 
 <template>
-  <footer :class="[resolvedClasses.root]" data-slot="rlv-footer" v-bind="$attrs">
+  <footer :class="[resolvedClasses.root]" data-slot="root" v-bind="$attrs">
     <div :class="resolvedClasses.container">
-      <div :class="resolvedClasses.left" data-slot="footer-left">
+      <div :class="resolvedClasses.left" data-slot="left">
         <slot name="left" />
       </div>
-      <div :class="resolvedClasses.center" data-slot="footer-center">
+      <div :class="resolvedClasses.center" data-slot="center">
         <slot name="center" />
       </div>
-      <div :class="resolvedClasses.right" data-slot="footer-right">
+      <div :class="resolvedClasses.right" data-slot="right">
         <slot name="right" />
       </div>
     </div>

package/src/components/vue/RLVHeader.vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, onUnmounted, ref } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import headerTheme from "../../themes/header.theme"
 import { getHeaderStack } from "../../utils/headerStack"
 
@@ -15,8 +15,8 @@ export interface RLVHeaderProps {
   fixed?: HeaderVariants["fixed"]
   stackIndex?: number
   hideOnScroll?: boolean
-  ui?: Partial<Record<string, string>>
-  class?: string
+  ui?: ComponentSlots<typeof headerTheme>
+  class?: any
 }
 
 const {
@@ -25,8 +25,8 @@ const {
   fixed = false,
   stackIndex = 0,
   hideOnScroll = false,
-  class: className,
-  ui: uiProp
+  ui: uiProp,
+  class: className
 } = defineProps<RLVHeaderProps>()
 
 defineSlots<{
@@ -112,18 +112,18 @@ onUnmounted(() => {
     :id="id"
     :class="[resolvedClasses.root]"
     :style="fixedStyle"
-    data-slot="rlv-header"
+    data-slot="root"
     v-bind="$attrs"
   >
     <div ref="contentRef" :class="resolvedClasses.content">
       <div :class="resolvedClasses.container">
-        <div :class="resolvedClasses.left" data-slot="header-left">
+        <div :class="resolvedClasses.left" data-slot="left">
           <slot name="left" />
         </div>
-        <div :class="resolvedClasses.center" data-slot="header-center">
+        <div :class="resolvedClasses.center" data-slot="center">
           <slot name="center" />
         </div>
-        <div :class="resolvedClasses.right" data-slot="header-right">
+        <div :class="resolvedClasses.right" data-slot="right">
           <slot name="right" />
         </div>
       </div>

package/src/components/vue/RLVIcon.vue

@@ -2,7 +2,7 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import iconTheme from "../../themes/icon.theme"
 
 const icon = scv(iconTheme)
@@ -11,11 +11,11 @@ type IconVariants = ComponentVariants<typeof iconTheme>
 export interface RLVIconProps {
   name: string
   size?: IconVariants["size"]
-  class?: string
-  ui?: Partial<Record<string, string>>
+  ui?: ComponentSlots<typeof iconTheme>
+  class?: any
 }
 
-const { name, size = "md", class: className, ui: uiProp } = defineProps<RLVIconProps>()
+const { name, size = "md", ui: uiProp, class: className } = defineProps<RLVIconProps>()
 
 const resolvedClasses = computed(() =>
   resolveClasses(icon, { size }, useUi("icon", uiProp), className)
@@ -27,12 +27,7 @@ defineSlots<{
 </script>
 
 <template>
-  <span
-    v-bind="$attrs"
-    :class="[resolvedClasses.root, name]"
-    data-slot="rlv-icon"
-    aria-hidden="true"
-  >
+  <span v-bind="$attrs" :class="[resolvedClasses.root, name]" data-slot="root" aria-hidden="true">
     <slot />
   </span>
 </template>

package/src/components/vue/RLVLogo.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
+import type { ComponentSlots } from "../../types"
 import logoTheme from "../../themes/logo.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
@@ -11,9 +12,9 @@ export interface RLVLogoProps {
   variant?: string
   mode?: "color" | "white" | "black"
   href?: string
-  ui?: Partial<Record<string, string>>
-  class?: string
   alt?: string
+  ui?: ComponentSlots<typeof logoTheme>
+  class?: any
   [key: string]: unknown
 }
 
@@ -64,7 +65,7 @@ const Tag = computed(() => (props.href ? "a" : "div"))
     :href="Tag === 'a' ? href : undefined"
     :aria-label="alt || variant"
     :class="resolvedClasses.root"
-    data-slot="rlv-logo"
+    data-slot="root"
   >
     <template v-if="logoSrc">
       <span v-if="isIcon" :class="[logoSrc, 'size-full block shrink-0']" aria-hidden="true" />

package/src/components/vue/RLVPlaceholder.vue

@@ -2,17 +2,18 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
+import type { ComponentSlots } from "../../types"
 import placeholderTheme from "../../themes/placeholder.theme"
 
 const placeholder = scv(placeholderTheme)
 
 export interface RLVPlaceholderProps {
-  ui?: Partial<Record<string, string>>
-  class?: string
+  ui?: ComponentSlots<typeof placeholderTheme>
+  class?: any
   [key: string]: unknown
 }
 
-const { class: className, ui: uiProp } = defineProps<RLVPlaceholderProps>()
+const { ui: uiProp, class: className } = defineProps<RLVPlaceholderProps>()
 
 defineSlots<{
   /**

package/src/components/vue/RLVScrollToTop.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import scrollToTopTheme from "../../themes/scroll-to-top.theme"
 import { useScrollToTop } from "../../composables/useScrollToTop"
 import { computed } from "vue"
@@ -15,8 +15,8 @@ export interface RLVScrollToTopProps {
   duration?: number
   threshold?: number
   showProgress?: boolean
-  ui?: Partial<Record<string, string>>
-  class?: string
+  ui?: ComponentSlots<typeof scrollToTopTheme>
+  class?: any
 }
 
 const {

package/src/components/vue/RLVSection.vue

@@ -1,35 +1,47 @@
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, useSlots } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import sectionTheme from "../../themes/section.theme"
+import type { RLVButtonProps } from "./RLVButton.vue"
+import RLVIcon from "./RLVIcon.vue"
+import RLVButton from "./RLVButton.vue"
 
 const section = scv(sectionTheme)
 type SectionVariants = ComponentVariants<typeof sectionTheme>
 
 export interface RLVSectionProps {
+  as?: any
   variant?: SectionVariants["variant"]
   headline?: string
   icon?: string
   title?: string
   description?: string
+  links?: RLVButtonProps[]
   orientation?: SectionVariants["orientation"]
   reverse?: boolean
   ctaVariant?: SectionVariants["ctaVariant"]
-  ui?: Partial<Record<string, string>>
-  class?: string
+  ui?: ComponentSlots<typeof sectionTheme>
+  class?: any
 }
 
 const {
+  as = "div",
   variant = "default",
   orientation = "vertical",
   reverse = false,
-  ctaVariant = "outline",
+  ctaVariant = "solid",
+  ui: uiProp,
   class: className,
-  ui: uiProp
+  headline,
+  title,
+  description,
+  links
 } = defineProps<RLVSectionProps>()
 
+const slots = useSlots()
+
 const resolvedClasses = computed(() =>
   resolveClasses(
     section,
@@ -38,10 +50,10 @@ const resolvedClasses = computed(() =>
       orientation,
       reverse,
       ...(variant === "cta" && { ctaVariant }),
-      headline: false,
-      title: false,
-      description: false,
-      body: false
+      headline: !!(slots.headline || headline),
+      title: !!(slots.title || title),
+      description: !!(slots.description || description),
+      body: !!slots.body
     },
     useUi("section", uiProp),
     className
@@ -50,8 +62,14 @@ const resolvedClasses = computed(() =>
 </script>
 
 <template>
-  <div data-slot="rlv-section" :class="[resolvedClasses.root]" v-bind="$attrs">
-    <slot name="background">
+  <component
+    :is="as"
+    data-slot="root"
+    :data-orientation="orientation"
+    :class="[resolvedClasses.root]"
+    v-bind="$attrs"
+  >
+    <slot v-if="$slots.background" name="background">
       <div :class="resolvedClasses.background" data-slot="background">
         <slot name="background" />
       </div>
@@ -59,40 +77,90 @@ const resolvedClasses = computed(() =>
 
     <slot name="top" />
 
-    <div :class="resolvedClasses.container">
-      <div :class="resolvedClasses.wrapper">
-        <div :class="resolvedClasses.header">
-          <slot name="leading">
-            <span v-if="icon" :class="resolvedClasses.leadingIcon" data-slot="leading-icon">
-              <span :class="icon" aria-hidden="true" />
-            </span>
-          </slot>
+    <div data-slot="container" :class="resolvedClasses.container">
+      <div
+        v-if="
+          $slots.header ||
+          icon ||
+          headline ||
+          title ||
+          description ||
+          $slots.body ||
+          $slots.footer ||
+          $slots.links ||
+          links?.length
+        "
+        data-slot="wrapper"
+        :class="resolvedClasses.wrapper"
+      >
+        <div
+          v-if="$slots.header || icon || headline || title || description"
+          data-slot="header"
+          :class="resolvedClasses.header"
+        >
+          <slot name="header">
+            <div v-if="icon || $slots.leading" data-slot="leading" :class="resolvedClasses.leading">
+              <slot name="leading" :ui="resolvedClasses">
+                <RLVIcon
+                  v-if="icon"
+                  :name="icon"
+                  size="md"
+                  :ui="{ root: resolvedClasses.leadingIcon }"
+                />
+              </slot>
+            </div>
 
-          <div v-if="headline" :class="resolvedClasses.headline">
-            {{ headline }}
-          </div>
+            <div v-if="headline" data-slot="headline" :class="resolvedClasses.headline">
+              <slot name="headline">
+                {{ headline }}
+              </slot>
+            </div>
 
-          <h2 v-if="title" :class="resolvedClasses.title">
-            {{ title }}
-          </h2>
+            <component
+              :is="variant === 'hero' ? 'h1' : 'h2'"
+              v-if="title"
+              data-slot="title"
+              :class="resolvedClasses.title"
+            >
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </component>
 
-          <div v-if="description" :class="resolvedClasses.description">
-            {{ description }}
-          </div>
+            <div v-if="description" data-slot="description" :class="resolvedClasses.description">
+              <slot name="description">
+                {{ description }}
+              </slot>
+            </div>
+          </slot>
         </div>
 
-        <div :class="resolvedClasses.body">
+        <div v-if="$slots.body" data-slot="body" :class="resolvedClasses.body">
           <slot name="body" />
         </div>
 
-        <div :class="resolvedClasses.footer">
-          <slot name="links" />
+        <div
+          v-if="$slots.footer || $slots.links || links?.length"
+          data-slot="footer"
+          :class="resolvedClasses.footer"
+        >
+          <slot name="footer">
+            <div
+              v-if="links?.length || $slots.links"
+              data-slot="links"
+              :class="resolvedClasses.links"
+            >
+              <RLVButton v-for="(link, index) in links" :key="index" size="lg" v-bind="link" />
+              <slot name="links" />
+            </div>
+          </slot>
         </div>
       </div>
 
-      <slot />
+      <slot v-if="$slots.default" />
+      <div v-else-if="orientation === 'horizontal'" class="hidden lg:block" />
     </div>
 
     <slot name="bottom" />
-  </div>
+  </component>
 </template>

package/src/themes/section.theme.ts

@@ -13,70 +13,53 @@ export default defineTheme({
     "title",
     "description",
     "body",
-    "features",
     "footer",
     "links"
   ],
   base: {
     root: "relative isolate",
     background: "absolute inset-0 -z-1 overflow-hidden",
-    container: "flex flex-col lg:grid gap-8 sm:gap-16",
+    container: "flex flex-col lg:grid",
     wrapper: "",
     header: "",
     leading: "flex items-center mb-6",
     leadingIcon: "size-10 shrink-0 text-primary",
-    headline: "mb-3",
+    headline: "",
     title: "text-pretty tracking-tight font-bold text-highlighted",
     description: "text-muted",
-    body: "mt-8",
-    features: "grid gap-8",
-    footer: "mt-8",
-    links: "flex flex-wrap gap-x-6 gap-y-3"
+    body: "",
+    footer: "",
+    links: "flex flex-wrap"
   },
   variants: {
     variant: {
       default: {
-        container: "py-16 sm:py-24 lg:py-32",
+        container: "py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
+        headline: "mb-3",
         title: "text-3xl sm:text-4xl lg:text-5xl",
         description: "text-base sm:text-lg",
-        features: "sm:grid-cols-2 lg:grid-cols-3"
+        body: "mt-8",
+        footer: "mt-8",
+        links: "gap-x-6 gap-y-3"
       },
       hero: {
         container: "py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24",
+        headline: "mb-4",
         title: "text-5xl sm:text-7xl",
         description: "text-lg sm:text-xl/8",
-        headline: "mb-4",
         leading: "mb-6",
         body: "mt-10",
         footer: "mt-10",
-        links: "mt-10"
+        links: "gap-x-6 gap-y-3"
       },
       cta: {
         root: "rounded-xl overflow-hidden",
-        container: "px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16",
+        container: "lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16",
         title: "text-3xl sm:text-4xl",
-        description: "text-base sm:text-lg"
-      }
-    },
-    orientation: {
-      horizontal: {
-        container: "lg:grid-cols-2 lg:items-center",
-        description: "text-pretty",
-        features: "gap-4"
-      },
-      vertical: {
-        container: "",
-        headline: "justify-center",
-        leading: "justify-center",
-        title: "text-center",
-        description: "text-center text-balance",
-        links: "justify-center",
-        features: ""
-      }
-    },
-    reverse: {
-      true: {
-        wrapper: "order-last"
+        description: "text-base sm:text-lg text-muted",
+        body: "mt-8",
+        footer: "mt-8",
+        links: "gap-x-6 gap-y-3"
       }
     },
     ctaVariant: {
@@ -101,6 +84,25 @@ export default defineTheme({
         description: "text-muted"
       }
     },
+    orientation: {
+      horizontal: {
+        container: "lg:grid-cols-2 lg:items-center",
+        description: "text-pretty"
+      },
+      vertical: {
+        container: "",
+        headline: "justify-center",
+        leading: "justify-center",
+        title: "text-center",
+        description: "text-center text-balance",
+        links: "justify-center"
+      }
+    },
+    reverse: {
+      true: {
+        wrapper: "order-last"
+      }
+    },
     headline: {
       true: {
         headline: "font-semibold text-primary flex items-center gap-1.5"
@@ -180,6 +182,6 @@ export default defineTheme({
   defaultVariants: {
     variant: "default",
     orientation: "vertical",
-    ctaVariant: "outline"
+    ctaVariant: "solid"
   }
 })

package/src/types/componentVariant.ts

@@ -8,3 +8,7 @@ export type ComponentVariants<T extends { variants?: Record<string, Record<strin
             : keyof T["variants"][K]
       }
     : never
+
+export type ComponentSlots<T extends { slots: readonly string[] }> = Partial<
+  Record<T["slots"][number], string>
+>