refactor: remove lit dependency

docs/components/home-page.tsx

@@ -3,7 +3,7 @@
 import { HomeLayout } from "fumadocs-ui/layouts/home";
 
 import { useRouter } from "next/navigation";
-import { createElement, useEffect } from "react";
+import { createElement } from "react";
 
 import { Button } from "@oreui-web/react/button";
 import chevronRightUrl from "oreui-web/icons/chevron-right";
@@ -36,15 +36,12 @@ export function OreHomePage({ lang }: HomePageProps) {
       : "Made with ❤ by Minecraft enthusiasts.";
   const scrollLabel = lang === "zh-CN" ? "OreUI 首页" : "OreUI home page";
 
-  useEffect(() => {
-    void import("oreui-web/scrollbar");
-  }, []);
-
   return createElement(
-    "ore-scrollbar",
+    "div",
     {
-      className: "ore-home-scrollbar h-dvh w-full [--ore-scrollbar-z-index:50]",
+      className: "ore-scrollbar ore-home-scrollbar h-dvh w-full",
       "aria-label": scrollLabel,
+      tabIndex: 0,
     },
     <>
       <HomeLayout {...baseOptions(true, lang)}>
@@ -57,7 +54,7 @@ export function OreHomePage({ lang }: HomePageProps) {
               className="inline-flex min-h-6 items-center gap-2 px-3 rounded-full bg-fd-secondary text-xs no-underline"
               href="https://github.com/katorlys/OreUI/releases"
             >
-              Version {version} out now
+              Version {version}
               <span
                 className="size-3 bg-current"
                 style={{

docs/components/home-showcase.tsx

@@ -28,6 +28,7 @@ export function HomeShowcase() {
   const [mode, setMode] = useState("survival");
   const [type, setType] = useState("education");
   const [store, setStore] = useState("realms");
+  const [username, setUsername] = useState("Shawn");
   const [progress, setProgress] = useState(0);
 
   useEffect(() => {
@@ -147,10 +148,7 @@ export function HomeShowcase() {
                 max={16}
                 aria-label="Render distance"
                 onInput={(event) =>
-                  setDistance(
-                    (event.currentTarget as HTMLElement & { value: number })
-                      .value,
-                  )
+                  setDistance(event.currentTarget.valueAsNumber)
                 }
               />
               <Slider
@@ -162,20 +160,23 @@ export function HomeShowcase() {
                 color="gold"
                 aria-label="Segmented render distance"
                 onInput={(event) =>
-                  setDistance(
-                    (event.currentTarget as HTMLElement & { value: number })
-                      .value,
-                  )
+                  setDistance(event.currentTarget.valueAsNumber)
                 }
               />
             </div>
             <div className="grid gap-3">
               <ProgressBar
                 className="w-full"
-                variant="labeled"
                 value={progress}
                 max={100}
+                aria-labelledby="showcase-progress-label"
               />
+              <output
+                className="ore-progress-bar-label w-full"
+                id="showcase-progress-label"
+              >
+                {progress}%
+              </output>
             </div>
             <div className="flex flex-row justify-between">
               <Checkbox
@@ -273,7 +274,8 @@ export function HomeShowcase() {
                 className="w-full max-w-none"
                 style={textfieldStyle}
                 label="Username"
-                value="Shawn"
+                value={username}
+                onInput={(event) => setUsername(event.currentTarget.value)}
               />
               <Textfield
                 className="w-full max-w-none"

docs/components/stories/accordion.story.tsx

@@ -2,8 +2,6 @@
 
 import { defineStoryFactory } from "@fumadocs/story/next/client";
 import { Accordion } from "@oreui-web/react/accordion";
-import { IconButton } from "@oreui-web/react/icon-button";
-import { useEffect, useState } from "react";
 
 interface AccordionPreviewProps {
   content: string;
@@ -16,25 +14,11 @@ function AccordionPreview({
   defaultOpen,
   title,
 }: AccordionPreviewProps) {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return null;
-  }
-
   return (
-    <Accordion defaultOpen={defaultOpen} value="realms">
-      <IconButton
-        aria-label={`Toggle ${title}`}
-        className="ore-accordion-trigger"
-        type="button"
-      >
+    <Accordion open={defaultOpen}>
+      <summary>
         <span className="ore-accordion-title">{title}</span>
-      </IconButton>
+      </summary>
       <div className="ore-accordion-content">{content}</div>
     </Accordion>
   );

docs/components/stories/button.story.tsx

@@ -49,13 +49,14 @@ function ButtonPreview({
 
 export function LinkButtonPreview() {
   return (
-    <Button
+    <a
+      className="ore-button"
       href="https://github.com/katorlys/OreUI"
       target="_blank"
       rel="noreferrer"
     >
       Open OreUI on GitHub
-    </Button>
+    </a>
   );
 }
 

docs/components/stories/checkbox.story.tsx

@@ -41,6 +41,7 @@ function CheckboxPreview({
     <div style={{ display: "grid", gap: "1rem" }}>
       <Checkbox
         className="text-current"
+        labelClassName="text-fd-foreground"
         checked={checked}
         color={color}
         disabled={disabled}

docs/components/stories/icon-button.story.tsx

@@ -5,7 +5,7 @@ import { IconButton } from "@oreui-web/react/icon-button";
 import { createElement } from "react";
 
 const closeIcon = (
-  <svg viewBox="0 0 8 8">
+  <svg aria-hidden="true" viewBox="0 0 8 8">
     <path
       d="M.5.5h1v1h.966v1h-1v-1H.5zm7 1h-1v-1h1zm-2 1v-1h1v1zm-1 1h1v-1h-1zm0 1v-1h-1v-1h-1v1h1v1h-1v1h-1v1h-1v1h1v-1h1v-1h1v-1zm0 0h1v1h-1zm1.034 2H6.5v1h1v-1h-.966v-1h-1z"
       fill="currentColor"
@@ -23,7 +23,7 @@ interface IconButtonPreviewProps {
 function IconButtonPreview({ disabled, label, type }: IconButtonPreviewProps) {
   return (
     <IconButton aria-label={label} disabled={disabled} type={type}>
-      {createElement("ore-icon", { "aria-hidden": "true" }, closeIcon)}
+      {createElement("ore-icon", null, closeIcon)}
     </IconButton>
   );
 }

docs/components/stories/modal.story.tsx

@@ -6,13 +6,7 @@ import { Checkbox } from "@oreui-web/react/checkbox";
 import { Container } from "@oreui-web/react/container";
 import { Modal } from "@oreui-web/react/modal";
 import { Textfield } from "@oreui-web/react/textfield";
-import {
-  createElement,
-  type CSSProperties,
-  useEffect,
-  useId,
-  useState,
-} from "react";
+import { createElement, useId, useRef } from "react";
 
 const backIcon = (
   <svg viewBox="0 0 8 8">
@@ -42,35 +36,28 @@ interface ModalPreviewProps {
 }
 
 function ModalPreview({ description, title, triggerLabel }: ModalPreviewProps) {
-  const [mounted, setMounted] = useState(false);
+  const dialogRef = useRef<HTMLDialogElement>(null);
   const id = useId();
   const titleId = `${id}-title`;
   const descriptionId = `${id}-description`;
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return null;
-  }
-
   return (
-    <Modal>
-      <Button className="ore-modal-trigger" type="button">
+    <>
+      <Button onClick={() => dialogRef.current?.showModal()} type="button">
         {triggerLabel}
       </Button>
-      <dialog
+      <Modal
         aria-describedby={descriptionId}
         aria-labelledby={titleId}
-        className="ore-modal-dialog"
+        ref={dialogRef}
       >
-        <form className="ore-modal-content">
+        <form className="ore-modal-content" method="dialog">
           <header className="ore-modal-header">
             <button
               aria-label="Back"
-              className="ore-modal-close ore-modal-header-button"
-              type="button"
+              className="ore-modal-header-button"
+              type="submit"
+              value="back"
             >
               {createElement("ore-icon", { "aria-hidden": "true" }, backIcon)}
             </button>
@@ -83,22 +70,14 @@ function ModalPreview({ description, title, triggerLabel }: ModalPreviewProps) {
             </h2>
             <button
               aria-label="Close"
-              className="ore-modal-close ore-modal-header-button"
-              type="button"
+              className="ore-modal-header-button"
+              type="submit"
+              value="close"
             >
               {createElement("ore-icon", { "aria-hidden": "true" }, closeIcon)}
             </button>
           </header>
-          <Container
-            className="modal-form-body"
-            style={
-              {
-                "--ore-container-gap": "1rem",
-                "--ore-container-padding": "1rem 1.375rem",
-              } as CSSProperties
-            }
-            variant="dark"
-          >
+          <Container className="modal-form-body ore-scrollbar" variant="dark">
             <p className="ore-modal-description" id={descriptionId}>
               {description}
             </p>
@@ -109,50 +88,22 @@ function ModalPreview({ description, title, triggerLabel }: ModalPreviewProps) {
               style={{ width: "min(100%, 15.25rem)" }}
             />
           </Container>
-          <Container
-            className="modal-confirmation"
-            style={
-              {
-                "--ore-container-gap": "0",
-                "--ore-container-padding": "0.5rem 1.375rem",
-                color: "var(--ore-color-foreground)",
-              } as CSSProperties
-            }
-            variant="light"
-          >
-            <Checkbox style={{ color: "var(--ore-color-foreground)" }}>
+          <Container className="modal-confirmation" variant="light">
+            <Checkbox labelClassName="text-fd-foreground">
               Checkbox example for confirmation
             </Checkbox>
           </Container>
-          <Container
-            className="modal-actions"
-            style={
-              {
-                "--ore-container-gap": "0.25rem",
-                "--ore-container-padding": "0.875rem 1.375rem",
-              } as CSSProperties
-            }
-            variant="light"
-          >
-            <Button
-              className="ore-modal-close"
-              style={{ width: "100%" }}
-              type="button"
-            >
+          <Container className="modal-actions" variant="light">
+            <Button type="submit" value="confirm">
               Confirm
             </Button>
-            <Button
-              className="ore-modal-close"
-              style={{ width: "100%" }}
-              type="button"
-              color="secondary"
-            >
+            <Button type="submit" value="cancel" color="secondary">
               Cancel
             </Button>
           </Container>
         </form>
-      </dialog>
-    </Modal>
+      </Modal>
+    </>
   );
 }
 

docs/components/stories/progress-bar.story.tsx

@@ -9,12 +9,27 @@ interface ProgressBarPreviewProps {
   labelPosition: "bottom" | "top";
   max: number;
   value: number;
-  variant: "labeled" | "plain";
 }
 
-function ProgressBarPreview(props: ProgressBarPreviewProps) {
+function ProgressBarPreview({
+  label,
+  labelAlign,
+  labelPosition,
+  max,
+  value,
+}: ProgressBarPreviewProps) {
+  const output = label ? (
+    <output className="ore-progress-bar-label" data-align={labelAlign}>
+      {label}
+    </output>
+  ) : null;
+
   return (
-    <ProgressBar {...props} style={{ color: "var(--color-fd-foreground)" }} />
+    <div style={{ color: "var(--color-fd-foreground)" }}>
+      {labelPosition === "top" ? output : null}
+      <ProgressBar value={value} max={max} aria-label={label || "Progress"} />
+      {labelPosition === "bottom" ? output : null}
+    </div>
   );
 }
 
@@ -30,7 +45,6 @@ export const progressBarStory = defineStory({
       labelPosition: "bottom",
       max: 100,
       value: 65,
-      variant: "labeled",
     },
   },
 });

docs/components/stories/progress-ring.story.tsx

@@ -2,7 +2,6 @@
 
 import { defineStoryFactory } from "@fumadocs/story/next/client";
 import { ProgressRing } from "@oreui-web/react/progress-ring";
-import { useEffect, useState } from "react";
 
 interface ProgressRingPreviewProps {
   label: string;
@@ -17,19 +16,20 @@ function ProgressRingPreview({
   size,
   value,
 }: ProgressRingPreviewProps) {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return null;
-  }
+  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
+  const safeValue = Math.min(safeMax, Math.max(0, value));
+  const frame = Math.min(15, Math.floor((safeValue / safeMax) * 16));
 
   return (
     <span style={{ fontSize: `${size}px` }}>
-      <ProgressRing aria-label={label} max={max} value={value} />
+      <ProgressRing
+        aria-label={label}
+        aria-valuemin={0}
+        aria-valuemax={safeMax}
+        aria-valuenow={safeValue}
+        role="progressbar"
+        style={{ "--ore-progress-ring-frame": frame } as React.CSSProperties}
+      />
     </span>
   );
 }