@rimelight/ui 0.0.56 → 0.0.58

package/src/components/textarea/RLATextarea.astro

@@ -33,7 +33,7 @@ const classes = textareaTheme({
       back to the min-height defined in textarea.theme.ts.
   -->
   <textarea
-    class={classes.textarea}
+    class:list={[classes.textarea, autoGrow && "[field-sizing:content] min-h-unset"]}
     data-slot="textarea"
     placeholder={placeholder}
     disabled={disabled}
@@ -41,7 +41,6 @@ const classes = textareaTheme({
     name={name}
     required={required}
     rows={autoGrow ? undefined : rows}
-    style={autoGrow ? "field-sizing: content; min-height: unset;" : undefined}
     {...rest}
   >{value}</textarea>
 </div>

package/src/components/theme-selector/RLAThemeSelector.astro

@@ -34,9 +34,9 @@ const items = [
         class={classes.select}
       >
         <span slot="leading" class="flex items-center">
-          <RLAIcon name="i-lucide-laptop" class="rla-theme-icon-system size-4" style="display: block;" />
-          <RLAIcon name="i-rl-sun" class="rla-theme-icon-light size-4" style="display: none;" />
-          <RLAIcon name="i-rl-moon" class="rla-theme-icon-dark size-4" style="display: none;" />
+          <RLAIcon name="i-lucide-laptop" class="rla-theme-icon-system size-4 block" />
+          <RLAIcon name="i-rl-sun" class="rla-theme-icon-light size-4 hidden" />
+          <RLAIcon name="i-rl-moon" class="rla-theme-icon-dark size-4 hidden" />
         </span>
       </RLASelect>
     </div>
@@ -72,9 +72,9 @@ const items = [
                 const sysIcons = this.querySelectorAll('.rla-theme-icon-system');
                 const lightIcons = this.querySelectorAll('.rla-theme-icon-light');
                 const darkIcons = this.querySelectorAll('.rla-theme-icon-dark');
-                sysIcons.forEach(el => ((el as HTMLElement).style.display = next === 'system' ? 'block' : 'none'));
-                lightIcons.forEach(el => ((el as HTMLElement).style.display = next === 'light' ? 'block' : 'none'));
-                darkIcons.forEach(el => ((el as HTMLElement).style.display = next === 'dark' ? 'block' : 'none'));
+                sysIcons.forEach(el => el.classList.toggle('hidden', next !== 'system'));
+                lightIcons.forEach(el => el.classList.toggle('hidden', next !== 'light'));
+                darkIcons.forEach(el => el.classList.toggle('hidden', next !== 'dark'));
 
                 const resolved = next === 'system'
                     ? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'

package/src/components/tooltip/RLATooltip.astro

@@ -12,23 +12,20 @@ const {
 
 const classes = tooltipTheme(Astro.props)
 
-const anchorName = `--rla-tt-${Math.random().toString(36).substring(2, 9)}`
 ---
 <div class={classes.root} data-slot="tooltip-container" data-placement={placement} {...rest}>
   <div
-    class={classes.trigger}
+    class:list={[classes.trigger, "rla-tt-trigger"]}
     data-slot="trigger"
     tabindex="0"
-    style={`anchor-name: ${anchorName}`}
   >
     <slot />
   </div>
 
   <div
-    class={classes.content}
+    class:list={[classes.content, "rla-tt-content"]}
     data-slot="content"
     role="tooltip"
-    style={`position-anchor: ${anchorName}`}
   >
     <slot name="content">
       {content}
@@ -44,15 +41,14 @@ const anchorName = `--rla-tt-${Math.random().toString(36).substring(2, 9)}`
    * fall back to the existing absolute + translate-based placement
    * defined in tooltip.theme.ts. No JavaScript needed in either path.
    */
+  .rla-tt-trigger {
+    anchor-name: --rla-tooltip-anchor;
+  }
+
   @supports (anchor-name: --x) {
     [data-slot="tooltip-container"] [data-slot="content"] {
-      /*
-       * Switch from the theme's translate-based absolute positioning
-       * to anchor-relative positioning so the browser handles overflow
-       * and viewport clipping automatically.
-       */
       position: absolute;
-      position-anchor: inherit; /* resolved from inline style */
+      position-anchor: --rla-tooltip-anchor;
 
       /* Reset theme's translate hacks — anchor() handles the math */
       transform: none !important;