Function bodies 1,000 total

    fn render(&self, __scope: &mut RenderScope, _children: &[NodeHandle]) -> NodeHandle {
        let mut style_parts = Vec::new();
        if !self.color.is_empty() {
            let c = &self.color;
            if c.starts_with('#') || c.starts_with("rgb") || c.starts_with("hsl") {
                style_parts.push(format!("--rinch-pagination-color: {}", c));
            } else {
                style_parts.push(format!(
                    "--rinch-pagination-color: var(--rinch-color-{}-6)",
                    c
                ));
            }
        }
        if !self.gap.is_empty() {
            style_parts.push(format!("gap: {}", self.gap));
        }

        let nav = rinch_macros::rsx! { nav { class: "rinch-pagination" } };
        nav.set_attribute("class", &self.class_string());

        if !style_parts.is_empty() {
            nav.set_attribute("style", &style_parts.join("; "));
        }

        let controls = rinch_macros::rsx! { div { class: "rinch-pagination__contro

    pub fn class_name(&self) -> &'static str {
        match self {
            PaperShadow::Xs => "rinch-paper--shadow-xs",
            PaperShadow::Sm => "rinch-paper--shadow-sm",
            PaperShadow::Md => "rinch-paper--shadow-md",
            PaperShadow::Lg => "rinch-paper--shadow-lg",
            PaperShadow::Xl => "rinch-paper--shadow-xl",
        }
    }

    fn from_str(s: &str) -> Result<Self, Self::Err> {
        match s.to_lowercase().as_str() {
            "xs" => Ok(PaperShadow::Xs),
            "sm" => Ok(PaperShadow::Sm),
            "md" => Ok(PaperShadow::Md),
            "lg" => Ok(PaperShadow::Lg),
            "xl" => Ok(PaperShadow::Xl),
            _ => Err(()),
        }
    }

    pub fn class_name(&self) -> &'static str {
        match self {
            PaperPadding::Xs => "rinch-paper--p-xs",
            PaperPadding::Sm => "rinch-paper--p-sm",
            PaperPadding::Md => "rinch-paper--p-md",
            PaperPadding::Lg => "rinch-paper--p-lg",
            PaperPadding::Xl => "rinch-paper--p-xl",
        }
    }

    fn from_str(s: &str) -> Result<Self, Self::Err> {
        match s.to_lowercase().as_str() {
            "xs" => Ok(PaperPadding::Xs),
            "sm" => Ok(PaperPadding::Sm),
            "md" => Ok(PaperPadding::Md),
            "lg" => Ok(PaperPadding::Lg),
            "xl" => Ok(PaperPadding::Xl),
            _ => Err(()),
        }
    }

    pub fn class_string(&self) -> String {
        let mut classes = vec!["rinch-paper"];

        // Shadow class
        if !self.shadow.is_empty() {
            if let Ok(s) = self.shadow.parse::<PaperShadow>() {
                classes.push(s.class_name());
            }
        }

        // Padding class
        if !self.p.is_empty() {
            if let Ok(padding) = self.p.parse::<PaperPadding>() {
                classes.push(padding.class_name());
            }
        }

        // Radius class
        if !self.radius.is_empty() {
            match self.radius.as_str() {
                "xs" => classes.push("rinch-paper--radius-xs"),
                "sm" => classes.push("rinch-paper--radius-sm"),
                "md" => classes.push("rinch-paper--radius-md"),
                "lg" => classes.push("rinch-paper--radius-lg"),
                "xl" => classes.push("rinch-paper--radius-xl"),
                _ => {}
            }
        }

        // Border
        if self.with_bor

    fn render(&self, __scope: &mut RenderScope, children: &[NodeHandle]) -> NodeHandle {
        let container = rinch_macros::rsx! {
            div { class: "rinch-paper" }
        };
        container.set_attribute("class", &self.class_string());
        for child in children {
            container.append_child(child);
        }
        container
    }

    pub fn class_name(&self) -> &'static str {
        match self {
            PasswordInputSize::Xs => "rinch-password-input--xs",
            PasswordInputSize::Sm => "rinch-password-input--sm",
            PasswordInputSize::Md => "rinch-password-input--md",
            PasswordInputSize::Lg => "rinch-password-input--lg",
            PasswordInputSize::Xl => "rinch-password-input--xl",
        }
    }

    fn from_str(s: &str) -> Result<Self, Self::Err> {
        match s.to_lowercase().as_str() {
            "xs" => Ok(PasswordInputSize::Xs),
            "sm" => Ok(PasswordInputSize::Sm),
            "md" => Ok(PasswordInputSize::Md),
            "lg" => Ok(PasswordInputSize::Lg),
            "xl" => Ok(PasswordInputSize::Xl),
            _ => Err(()),
        }
    }

    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        f.debug_struct("PasswordInput")
            .field("label", &self.label)
            .field("description", &self.description)
            .field("error", &self.error)
            .field("placeholder", &self.placeholder)
            .field(
                "value",
                &if self.value.is_empty() {
                    ""
                } else {
                    "[REDACTED]"
                },
            )
            .field("value_fn", &self.value_fn.as_ref().map(|_| "<reactive>"))
            .field("visible", &self.visible)
            .field(
                "visible_fn",
                &self.visible_fn.as_ref().map(|_| "<reactive>"),
            )
            .field("disabled", &self.disabled)
            .field("required", &self.required)
            .field("autofocus", &self.autofocus)
            .field("size", &self.size)
            .field("radius", &self.radius)
            .field(

    fn default() -> Self {
        Self {
            label: String::new(),
            description: String::new(),
            error: String::new(),
            placeholder: String::new(),
            value: String::new(),
            value_fn: None,
            visible: false,
            visible_fn: None,
            disabled: false,
            required: false,
            autofocus: false,
            size: String::new(),
            radius: String::new(),
            toggle_visibility: true,
            ontoggle: None,
            oninput: None,
        }
    }

    fn class_string(&self) -> String {
        let mut classes = vec!["rinch-password-input"];

        let size: PasswordInputSize = if self.size.is_empty() {
            PasswordInputSize::default()
        } else {
            self.size.parse().unwrap_or_default()
        };
        classes.push(size.class_name());

        if !self.error.is_empty() {
            classes.push("rinch-password-input--error");
        }
        if self.disabled {
            classes.push("rinch-password-input--disabled");
        }

        classes.join(" ")
    }

fn html_escape(s: &str) -> String {
    s.replace('&', "&")
        .replace('<', "&lt;")
        .replace('>', "&gt;")
        .replace('"', "&quot;")
}

    fn render(&self, __scope: &mut RenderScope, _children: &[NodeHandle]) -> NodeHandle {
        let container_class = self.class_string();

        // Get initial values
        let initial_password = if let Some(ref f) = self.value_fn {
            f()
        } else {
            self.value.clone()
        };

        let initial_visible = if let Some(ref f) = self.visible_fn {
            f()
        } else {
            self.visible
        };

        let container = rinch_macros::rsx! { div { class: "rinch-password-input" } };
        container.set_attribute("class", &container_class);

        // Label
        if !self.label.is_empty() {
            let label_text = &self.label;
            let required_mark = if self.required { " *" } else { "" };
            let label = rinch_macros::rsx! { label { class: "rinch-password-input__label" } };
            let label_text_node = __scope.create_text(&format!("{}{}", label_text, required_mark));
            label.append_child(&label

    pub fn class_name(&self) -> &'static str {
        match self {
            PopoverPosition::Top => "rinch-popover--top",
            PopoverPosition::TopStart => "rinch-popover--top-start",
            PopoverPosition::TopEnd => "rinch-popover--top-end",
            PopoverPosition::Bottom => "rinch-popover--bottom",
            PopoverPosition::BottomStart => "rinch-popover--bottom-start",
            PopoverPosition::BottomEnd => "rinch-popover--bottom-end",
            PopoverPosition::Left => "rinch-popover--left",
            PopoverPosition::LeftStart => "rinch-popover--left-start",
            PopoverPosition::LeftEnd => "rinch-popover--left-end",
            PopoverPosition::Right => "rinch-popover--right",
            PopoverPosition::RightStart => "rinch-popover--right-start",
            PopoverPosition::RightEnd => "rinch-popover--right-end",
        }
    }

    fn from_str(s: &str) -> Result<Self, Self::Err> {
        match s.to_lowercase().replace('-', "_").as_str() {
            "top" => Ok(PopoverPosition::Top),
            "top_start" | "topstart" => Ok(PopoverPosition::TopStart),
            "top_end" | "topend" => Ok(PopoverPosition::TopEnd),
            "bottom" => Ok(PopoverPosition::Bottom),
            "bottom_start" | "bottomstart" => Ok(PopoverPosition::BottomStart),
            "bottom_end" | "bottomend" => Ok(PopoverPosition::BottomEnd),
            "left" => Ok(PopoverPosition::Left),
            "left_start" | "leftstart" => Ok(PopoverPosition::LeftStart),
            "left_end" | "leftend" => Ok(PopoverPosition::LeftEnd),
            "right" => Ok(PopoverPosition::Right),
            "right_start" | "rightstart" => Ok(PopoverPosition::RightStart),
            "right_end" | "rightend" => Ok(PopoverPosition::RightEnd),
            _ => Err(()),
        }
    }

    fn default() -> Self {
        Self {
            opened: false,
            position: String::new(),
            offset: None,
            radius: String::new(),
            shadow: String::new(),
            with_arrow: false,
            arrow_size: None,
            arrow_offset: None,
            close_on_click_outside: true,
            close_on_escape: true,
            width: String::new(),
            z_index: None,
            trap_focus: false,
        }
    }

    pub fn class_string(&self) -> String {
        let mut classes = vec!["rinch-popover"];

        if !self.position.is_empty() {
            if let Ok(pos) = self.position.parse::<PopoverPosition>() {
                classes.push(pos.class_name());
            }
        } else {
            classes.push(PopoverPosition::Bottom.class_name());
        }

        if !self.radius.is_empty() {
            match self.radius.as_str() {
                "xs" => classes.push("rinch-popover--radius-xs"),
                "sm" => classes.push("rinch-popover--radius-sm"),
                "md" => classes.push("rinch-popover--radius-md"),
                "lg" => classes.push("rinch-popover--radius-lg"),
                "xl" => classes.push("rinch-popover--radius-xl"),
                _ => {}
            }
        }

        if !self.shadow.is_empty() {
            match self.shadow.as_str() {
                "xs" => classes.push("rinch-popover--shadow-xs"),
                "sm" => classes.push("rin

    fn render(&self, __scope: &mut RenderScope, children: &[NodeHandle]) -> NodeHandle {
        let mut style_parts = Vec::new();
        if let Some(offset) = self.offset {
            style_parts.push(format!("--rinch-popover-offset: {}px", offset));
        }
        if !self.width.is_empty() {
            style_parts.push(format!("--rinch-popover-width: {}", self.width));
        }
        if let Some(size) = self.arrow_size {
            style_parts.push(format!("--rinch-popover-arrow-size: {}px", size));
        }
        if let Some(offset) = self.arrow_offset {
            style_parts.push(format!("--rinch-popover-arrow-offset: {}px", offset));
        }

        let root = rinch_macros::rsx! { div { class: "rinch-popover" } };
        root.set_attribute("class", &self.class_string());
        if !style_parts.is_empty() {
            root.set_attribute("style", &style_parts.join("; "));
        }

        for child in children {
            root.append_child(child);
        }

    fn render(&self, __scope: &mut RenderScope, children: &[NodeHandle]) -> NodeHandle {
        let target = rinch_macros::rsx! { div { class: "rinch-popover__target" } };
        for child in children {
            target.append_child(child);
        }
        target
    }

    fn render(&self, __scope: &mut RenderScope, children: &[NodeHandle]) -> NodeHandle {
        let dropdown = rinch_macros::rsx! { div { class: "rinch-popover__dropdown" } };
        for child in children {
            dropdown.append_child(child);
        }
        dropdown
    }

    pub fn class_name(&self) -> &'static str {
        match self {
            ProgressSize::Xs => "rinch-progress--xs",
            ProgressSize::Sm => "rinch-progress--sm",
            ProgressSize::Md => "rinch-progress--md",
            ProgressSize::Lg => "rinch-progress--lg",
            ProgressSize::Xl => "rinch-progress--xl",
        }
    }

    fn from_str(s: &str) -> Result<Self, Self::Err> {
        match s.to_lowercase().as_str() {
            "xs" => Ok(ProgressSize::Xs),
            "sm" => Ok(ProgressSize::Sm),
            "md" => Ok(ProgressSize::Md),
            "lg" => Ok(ProgressSize::Lg),
            "xl" => Ok(ProgressSize::Xl),
            _ => Err(()),
        }
    }

    pub fn class_name(&self) -> &'static str {
        match self {
            ProgressRadius::Xs => "rinch-progress--radius-xs",
            ProgressRadius::Sm => "rinch-progress--radius-sm",
            ProgressRadius::Md => "rinch-progress--radius-md",
            ProgressRadius::Lg => "rinch-progress--radius-lg",
            ProgressRadius::Xl => "rinch-progress--radius-xl",
        }
    }

    fn from_str(s: &str) -> Result<Self, Self::Err> {
        match s.to_lowercase().as_str() {
            "xs" => Ok(ProgressRadius::Xs),
            "sm" => Ok(ProgressRadius::Sm),
            "md" => Ok(ProgressRadius::Md),
            "lg" => Ok(ProgressRadius::Lg),
            "xl" => Ok(ProgressRadius::Xl),
            _ => Err(()),
        }
    }

    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        f.debug_struct("Progress")
            .field("value", &self.value)
            .field("value_fn", &self.value_fn.as_ref().map(|_| "<reactive>"))
            .field("color", &self.color)
            .field("size", &self.size)
            .field("radius", &self.radius)
            .field("striped", &self.striped)
            .field("animated", &self.animated)
            .finish()
    }

    pub fn class_string(&self) -> String {
        let mut classes = vec!["rinch-progress"];

        // Size class
        let size: ProgressSize = if self.size.is_empty() {
            ProgressSize::default()
        } else {
            self.size.parse().unwrap_or_default()
        };
        classes.push(size.class_name());

        // Radius class
        if !self.radius.is_empty() {
            if let Ok(radius) = self.radius.parse::<ProgressRadius>() {
                classes.push(radius.class_name());
            }
        }

        classes.join(" ")
    }

    pub fn bar_class_string(&self) -> String {
        let mut classes = vec!["rinch-progress__bar"];

        if self.striped {
            classes.push("rinch-progress__bar--striped");
        }

        if self.animated {
            classes.push("rinch-progress__bar--animated");
        }

        classes.join(" ")
    }

    fn render(&self, __scope: &mut RenderScope, _children: &[NodeHandle]) -> NodeHandle {
        let class = self.class_string();
        let bar_class = self.bar_class_string();

        // Determine value - prefer reactive getter if available
        let current_value = if let Some(ref value_fn) = self.value_fn {
            value_fn()
        } else {
            self.value.unwrap_or(0.0)
        };
        let value = current_value.clamp(0.0, 100.0);

        // Color style prefix
        let color_prefix = if self.color.is_empty() {
            None
        } else {
            let c = &self.color;
            Some(
                if c.starts_with('#') || c.starts_with("rgb") || c.starts_with("hsl") {
                    format!("--rinch-progress-color: {};", c)
                } else {
                    format!("--rinch-progress-color: var(--rinch-color-{}-6);", c)
                },
            )
        };

        let container = rinch_macros::rsx! { div { class: "rinch-pr

    pub fn class_name(&self) -> &'static str {
        match self {
            RadioSize::Xs => "rinch-radio--xs",
            RadioSize::Sm => "rinch-radio--sm",
            RadioSize::Md => "rinch-radio--md",
            RadioSize::Lg => "rinch-radio--lg",
            RadioSize::Xl => "rinch-radio--xl",
        }
    }

    fn from_str(s: &str) -> Result<Self, Self::Err> {
        match s.to_lowercase().as_str() {
            "xs" => Ok(RadioSize::Xs),
            "sm" => Ok(RadioSize::Sm),
            "md" => Ok(RadioSize::Md),
            "lg" => Ok(RadioSize::Lg),
            "xl" => Ok(RadioSize::Xl),
            _ => Err(()),
        }
    }

    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        f.debug_struct("Radio")
            .field("name", &self.name)
            .field("value", &self.value)
            .field("label", &self.label)
            .field("description", &self.description)
            .field("checked", &self.checked)
            .field(
                "checked_fn",
                &self.checked_fn.as_ref().map(|_| "<reactive>"),
            )
            .field("disabled", &self.disabled)
            .field("size", &self.size)
            .field("color", &self.color)
            .field("error", &self.error)
            .field("onchange", &self.onchange.as_ref().map(|_| "<callback>"))
            .finish()
    }

    fn base_class_string(&self) -> String {
        let mut classes = vec!["rinch-radio"];

        // Size class
        let size: RadioSize = if self.size.is_empty() {
            RadioSize::default()
        } else {
            self.size.parse().unwrap_or_default()
        };
        classes.push(size.class_name());

        if self.disabled {
            classes.push("rinch-radio--disabled");
        }
        if self.error {
            classes.push("rinch-radio--error");
        }

        classes.join(" ")
    }

    pub fn class_string(&self) -> String {
        let mut class = self.base_class_string();
        if self.checked {
            class.push_str(" rinch-radio--checked");
        }
        class
    }

    fn render(&self, scope: &mut RenderScope, _children: &[NodeHandle]) -> NodeHandle {
        let base_class = self.base_class_string();

        // Determine if we have a reactive checked state
        let is_checked = if let Some(ref checked_fn) = self.checked_fn {
            checked_fn()
        } else {
            self.checked
        };

        // Build the class string
        let class = if is_checked {
            format!("{} rinch-radio--checked", base_class)
        } else {
            base_class
        };

        // Create label container
        let label_node = scope.create_element("label");
        label_node.set_attribute("class", &class);

        // Color style
        if !self.color.is_empty() {
            let c = &self.color;
            let style = if c.starts_with('#') || c.starts_with("rgb") || c.starts_with("hsl") {
                format!("--rinch-radio-color: {}", c)
            } else {
                format!("--rinch-radio-color: var(--rinch-color-{

    pub fn class_string(&self) -> String {
        let mut classes = vec!["rinch-radio-group"];

        if self.orientation == "horizontal" {
            classes.push("rinch-radio-group--horizontal");
        }

        if !self.error.is_empty() {
            classes.push("rinch-radio-group--error");
        }

        classes.join(" ")
    }

    fn render(&self, scope: &mut RenderScope, children: &[NodeHandle]) -> NodeHandle {
        let class = self.class_string();

        // Create container
        let container = scope.create_element("div");
        container.set_attribute("class", &class);
        container.set_attribute("role", "radiogroup");

        // Label
        if !self.label.is_empty() {
            let label_text = &self.label;
            let label_div = scope.create_element("div");
            label_div.set_attribute("class", "rinch-radio-group__label");
            let label_text_node = scope.create_text(label_text);
            label_div.append_child(&label_text_node);
            container.append_child(&label_div);
        }

        // Description
        if !self.description.is_empty() {
            let desc = &self.description;
            let desc_div = scope.create_element("div");
            desc_div.set_attribute("class", "rinch-radio-group__description");
            let desc_text = scope.crea

    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        f.debug_struct("Select")
            .field("label", &self.label)
            .field("description", &self.description)
            .field("error", &self.error)
            .field("placeholder", &self.placeholder)
            .field("size", &self.size)
            .field("disabled", &self.disabled)
            .field("required", &self.required)
            .field("value", &self.value)
            .field("value_fn", &self.value_fn.as_ref().map(|_| "<reactive>"))
            .field("onchange", &self.onchange.as_ref().map(|_| "<callback>"))
            .finish()
    }

    pub fn class_string(&self) -> String {
        let mut classes = vec!["rinch-select"];

        // Size
        if !self.size.is_empty() {
            match self.size.as_str() {
                "xs" => classes.push("rinch-select--xs"),
                "sm" => classes.push("rinch-select--sm"),
                "md" => classes.push("rinch-select--md"),
                "lg" => classes.push("rinch-select--lg"),
                "xl" => classes.push("rinch-select--xl"),
                _ => {}
            }
        }

        // Error state
        if !self.error.is_empty() {
            classes.push("rinch-select--error");
        }

        classes.join(" ")
    }

    fn render(&self, __scope: &mut RenderScope, children: &[NodeHandle]) -> NodeHandle {
        let container = rinch_macros::rsx! { div { class: "rinch-select" } };
        container.set_attribute("class", &self.class_string());

        // Label
        if !self.label.is_empty() {
            let label_text = &self.label;
            let label = rinch_macros::rsx! { label { class: "rinch-select__label" } };
            let label_text_node = __scope.create_text(label_text);
            label.append_child(&label_text_node);

            if self.required {
                let required_span =
                    rinch_macros::rsx! { span { class: "rinch-select__required", "*" } };
                label.append_child(&required_span);
            }

            container.append_child(&label);
        }

        // Select element
        let select = rinch_macros::rsx! { select { class: "rinch-select__input" } };

        if self.disabled {
            select.set_attribute("disabled", "");

    fn style_string(&self) -> String {
        let mut styles = vec!["display: grid".to_string()];

        // Grid template columns
        if !self.min_child_width.is_empty() {
            // Auto-fill with minimum width
            styles.push(format!(
                "grid-template-columns: repeat(auto-fill, minmax({}, 1fr))",
                self.min_child_width
            ));
        } else {
            // Fixed number of columns
            let cols = self.cols.unwrap_or(1);
            styles.push(format!("grid-template-columns: repeat({}, 1fr)", cols));
        }

        // Gap
        let gap = self.spacing_to_css(&self.spacing);
        let v_gap = if self.vertical_spacing.is_empty() {
            gap.clone()
        } else {
            self.spacing_to_css(&self.vertical_spacing)
        };

        if gap == v_gap {
            styles.push(format!("gap: {}", gap));
        } else {
            styles.push(format!("row-gap: {}", v_gap));
            styles.push(format!("

    fn spacing_to_css(&self, spacing: &str) -> String {
        if spacing.is_empty() {
            return "var(--rinch-spacing-md)".to_string();
        }
        match spacing {
            "xs" => "var(--rinch-spacing-xs)".to_string(),
            "sm" => "var(--rinch-spacing-sm)".to_string(),
            "md" => "var(--rinch-spacing-md)".to_string(),
            "lg" => "var(--rinch-spacing-lg)".to_string(),
            "xl" => "var(--rinch-spacing-xl)".to_string(),
            val => val.to_string(),
        }
    }

    fn render(&self, __scope: &mut RenderScope, children: &[NodeHandle]) -> NodeHandle {
        let container = rinch_macros::rsx! {
            div { class: "rinch-simple-grid" }
        };
        container.set_attribute("style", &self.style_string());
        for child in children {
            container.append_child(child);
        }
        container
    }

    pub fn class_name(&self) -> &'static str {
        match self {
            SkeletonRadius::Xs => "rinch-skeleton--radius-xs",
            SkeletonRadius::Sm => "rinch-skeleton--radius-sm",
            SkeletonRadius::Md => "rinch-skeleton--radius-md",
            SkeletonRadius::Lg => "rinch-skeleton--radius-lg",
            SkeletonRadius::Xl => "rinch-skeleton--radius-xl",
        }
    }

    fn from_str(s: &str) -> Result<Self, Self::Err> {
        match s.to_lowercase().as_str() {
            "xs" => Ok(SkeletonRadius::Xs),
            "sm" => Ok(SkeletonRadius::Sm),
            "md" => Ok(SkeletonRadius::Md),
            "lg" => Ok(SkeletonRadius::Lg),
            "xl" => Ok(SkeletonRadius::Xl),
            _ => Err(()),
        }
    }

    fn default() -> Self {
        Self {
            width: String::new(),
            height: String::new(),
            radius: String::new(),
            circle: false,
            animate: true,
            visible: true,
        }
    }

    pub fn class_string(&self) -> String {
        let mut classes = vec!["rinch-skeleton"];

        if self.circle {
            classes.push("rinch-skeleton--circle");
        } else if !self.radius.is_empty() {
            if let Ok(radius) = self.radius.parse::<SkeletonRadius>() {
                classes.push(radius.class_name());
            }
        }

        if self.animate {
            classes.push("rinch-skeleton--animate");
        }

        classes.join(" ")
    }

    fn render(&self, __scope: &mut RenderScope, children: &[NodeHandle]) -> NodeHandle {
        // If not visible (loaded), render children in a wrapper span
        if !self.visible {
            let wrapper = rinch_macros::rsx! { span {} };
            for child in children {
                wrapper.append_child(child);
            }
            return wrapper;
        }

        let container = rinch_macros::rsx! { div { class: "rinch-skeleton" } };
        container.set_attribute("class", &self.class_string());

        let mut styles = Vec::new();
        if !self.width.is_empty() {
            let w = &self.width;
            styles.push(format!("width: {}", w));
        }
        if !self.height.is_empty() {
            let h = &self.height;
            styles.push(format!("height: {}", h));
            if self.circle {
                styles.push(format!("width: {}", h)); // Circle needs equal width
            }
        }

        if !styles.is_empty() {
            container

    pub fn class_name(&self) -> &'static str {
        match self {
            SliderSize::Xs => "rinch-slider--xs",
            SliderSize::Sm => "rinch-slider--sm",
            SliderSize::Md => "rinch-slider--md",
            SliderSize::Lg => "rinch-slider--lg",
            SliderSize::Xl => "rinch-slider--xl",
        }
    }

    fn from_str(s: &str) -> Result<Self, Self::Err> {
        match s.to_lowercase().as_str() {
            "xs" => Ok(SliderSize::Xs),
            "sm" => Ok(SliderSize::Sm),
            "md" => Ok(SliderSize::Md),
            "lg" => Ok(SliderSize::Lg),
            "xl" => Ok(SliderSize::Xl),
            _ => Err(()),
        }
    }