### Menu Component Basic Usage Example

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Menu/index.md

A simple example demonstrating the basic usage of the `b-menu` component.

```HTML
<b-menu> | Menu
```

--------------------------------

### Open and Manage Banana UI Modal with JavaScript

Source: https://github.com/friedricenoodles/banana-ui/blob/master/public/Modal/basicUsage.html

This JavaScript snippet demonstrates how to programmatically open a `b-modal` component by clicking a `b-button`. It also includes event listeners for the modal's 'ok' and 'cancel' actions, setting the `open` property to `false` to close the modal, and displaying a success message using `window.BMessage.success` upon confirmation.

```javascript
const button = document.querySelector('b-button'); const modal = document.querySelector('b-modal'); button.addEventListener('click', () => { modal.open = true; }); modal.addEventListener('ok', () => { modal.open = false; window.BMessage.success({ content: "OK~" }) }); modal.addEventListener('cancel', () => { modal.open = false; });
```

--------------------------------

### Tooltip Component Events API

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Tooltip/index.md

API documentation for events emitted by the Tooltip component. These events signal different stages of the tooltip's lifecycle, such as when it starts showing, starts hiding, finishes showing, or finishes hiding.

```APIDOC
Event: show
  Description: Triggered when pop-up starts
  Detail: -
Event: hide
  Description: Triggered when hiding starts
  Detail: -
Event: afterShow
  Description: Triggered when pop-up completes
  Detail: -
Event: afterHide
  Description: Triggered when hiding completes
  Detail: -
```

--------------------------------

### Handle b-menu Select Event in JavaScript

Source: https://github.com/friedricenoodles/banana-ui/blob/master/public/Menu/event.html

This snippet demonstrates how to listen for the 'select' event on a 'b-menu' component. When an item is selected, the event listener logs the value of the selected item to the console. This assumes a 'b-menu' element is present in the DOM.

```JavaScript
const menu = document.querySelector('b-menu');
menu.addEventListener('select', (event) => {
  console.log(event.detail.item.value);
});
```

--------------------------------

### Toggle Banana UI Tooltip Visibility with JavaScript

Source: https://github.com/friedricenoodles/banana-ui/blob/master/public/Tooltip/empty.html

This JavaScript code snippet demonstrates how to control the visibility and content of a 'b-tooltip' element and change the text of a 'b-button' based on a click event. It uses 'document.querySelector' to select elements and an event listener to toggle a boolean state, updating the UI accordingly.

```JavaScript
let visible = false;
const btn = document.querySelector('b-button');
const tooltip = document.querySelector('b-tooltip');
btn.addEventListener('click', () => {
  visible = !visible;
  tooltip.content = visible ? 'This is a tooltip.' : '';
  btn.textContent = visible ? 'Hide' : 'Show';
});
```

--------------------------------

### Basic Input Component Usage

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Input/index.md

Demonstrates the fundamental HTML tag for the Input component.

```HTML
<b-input>
```

--------------------------------

### Input Component Methods Reference

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Input/index.md

Describes the programmatic methods available on the Input component instance for validation and other interactions.

```APIDOC
Methods:
  reportValidity():
    description: Triggers validity check, returns whether the current value of the input box is valid. If the value is invalid, a prompt will pop up. See MDN documentation.
    parameters: -
  checkValidity():
    description: Returns whether the current value of the input box is valid. See MDN documentation.
    parameters: -
```

--------------------------------

### Basic Radio Component Usage

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Radio/index.md

Demonstrates the basic usage of the `b-radio` component.

```HTML
<b-radio> | Radio
```

--------------------------------

### Overlay Component Methods

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Overlay/index.md

Methods to programmatically control the Overlay component's visibility.

```APIDOC
show(): void
  Description: Displays the overlay.
hide(): void
  Description: Hides the overlay.
```

--------------------------------

### Menu Component API Reference

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Menu/index.md

Comprehensive API documentation for the Menu and MenuItem components, including their attributes, events, slots, CSS parts, and customizable style variables.

```APIDOC
Menu Component:
  Introduction: 菜单提供了一个选项/操作列表供用户选择。

MenuItem Attributes:
  value:
    Description: MenuItem 的唯一标识
    Type: string
    Default: -
  disabled:
    Description: MenuItem 是否禁用
    Type: boolean
    Default: false

Events:
  select:
    Description: 选中时触发
    Detail: {item: {value: string}}

Slots:
  (default):
    Description: 菜单的内容

MenuItem Slots:
  (default):
    Description: 菜单子项的内容，一般写入 MenuItem 或者分割线 Divider

MenuItem CSS Parts:
  base:
    Description: 包裹组件的容器

Style Variables:
  --banana-menu-background:
    Description: 菜单的背景颜色
    Default: #fff
  --banana-menu-border:
    Description: 菜单边框样式
    Default: 1px solid rgb(229, 231, 233)
  --banana-menu-padding:
    Description: 菜单内边距
    Default: 6px 0
```

--------------------------------

### Input Component Events Reference

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Input/index.md

Lists the events emitted by the Input component, allowing developers to react to user interactions like value changes, focus, and blur.

```APIDOC
Events:
  change:
    description: Triggered when the input box value changes
    detail: {value: string}
  focus:
    description: Triggered when the input box gains focus
    detail: -
  blur:
    description: Triggered when the input box loses focus
    detail: -
```

--------------------------------

### Radio Component API Reference

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Radio/index.md

Details the attributes, events, slots, CSS parts, and style variables for the `Radio` component.

```APIDOC
Radio:
  Attributes & Properties:
    value:
      Description: 用于判断当前选中状态的值 (Value used to determine current selected state)
      Type: string
      Default: -
    disabled:
      Description: 是否禁用 (Whether disabled)
      Type: boolean
      Default: false
    size:
      Description: 尺寸 (Size)
      Type: 'small' | 'medium' | 'large'
      Default: 'medium'
  Slots:
    (default):
      Description: Radio 的文本内容 (Radio's text content)
  CSS Parts:
    base:
      Description: 包裹 Radio 的容器 (Container wrapping Radio)
    control:
      Description: Radio 的控制器(选中框) (Radio's controller (checkbox))
    label:
      Description: Radio 的文本内容区域 (Radio's text content area)
  Style Variables:
    --banana-radio-margin-right:
      Description: Radio 右间距 (Radio right margin)
      Default: 8px
    --banana-radio-label-padding:
      Description: Radio 文本区域的内边距 (Radio text area padding)
      Default: 0 0.5em
    --banana-radio-control-border-color:
      Description: 选中框的边框颜色 (Checkbox border color)
      Default: rgba(154, 154, 154, 1)
    --banana-radio-control-size-small:
      Description: 尺寸为 small 时选中框大小 (Checkbox size when small)
      Default: 12px
    --banana-radio-control-size-medium:
      Description: 尺寸为 medium 时选中框大小 (Checkbox size when medium)
      Default: 16px
    --banana-radio-control-size-large:
      Description: 尺寸为 large 时选中框大小 (Checkbox size when large)
      Default: 20px
    --banana-radio-label-font-size-small:
      Description: 尺寸为 small 时文本字体大小 (Text font size when small)
      Default: 14px
    --banana-radio-label-font-size-medium:
      Description: 尺寸为 medium 时文本字体大小 (Text font size when medium)
      Default: 16px
    --banana-radio-label-font-size-large:
      Description: 尺寸为 large 时文本字体大小 (Text font size when large)
      Default: 20px
```

--------------------------------

### Overlay Component CSS Parts

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Overlay/index.md

CSS parts for styling the internal structure of the Overlay component using the ::part() pseudo-element.

```APIDOC
container: HTMLElement
  Description: The container for the default slot.
```

--------------------------------

### Input Component Attributes Reference

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Input/index.md

Defines the properties available for configuring the Input component, including value, state, appearance, and HTML input type behaviors.

```APIDOC
Attributes:
  value:
    description: Input box value
    type: string
    default: -
  disabled:
    description: Whether to disable the input box
    type: boolean
    default: false
  placeholder:
    description: Text that appears in the input box when value is empty
    type: string
    default: -
  size:
    description: Input box size
    type: small | medium | large
    default: medium
  type:
    description: Input box type (e.g., text, password, email, number, tel, url, search)
    type: text | password | email | number | tel | url | search
    default: text
  name:
    description: Field name for form submission
    type: string
    default: -
  required:
    description: Whether it is required
    type: boolean
    default: false
  controlled:
    description: Whether it is controlled
    type: boolean
    default: false
  autocomplete:
    description: HTMLInputElement['autocomplete'] attribute
    type: HTMLInputElement['autocomplete']
    default: -
  pattern:
    description: HTML pattern attribute
    type: string
    default: -
  minlength:
    description: HTML minlength attribute
    type: number
    default: -
  maxlength:
    description: HTML maxlength attribute
    type: number
    default: -
  min:
    description: HTML min attribute
    type: number | string
    default: -
  max:
    description: HTML max attribute
    type: number | string
    default: -
```

--------------------------------

### Basic Countdown Component Usage

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Countdown/index.md

Illustrates the basic HTML tag for integrating the Countdown component into a web page. This snippet shows the component's tag name and its general representation.

```HTML
<b-countdown> | Countdown
```

--------------------------------

### Tabs Component Methods

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Tabs/index.md

Lists the callable methods available on the Tabs component, along with their parameters and descriptions.

```APIDOC
Methods:
- show():
    Description: Switch to the corresponding tab item
    Parameters:
    - panel: Name of the corresponding mounted panel
```

--------------------------------

### Basic Tooltip Component Tag

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Tooltip/index.md

Illustrates the fundamental HTML tag used to define a Tooltip component.

```HTML
<b-tooltip> | Tooltip
```

--------------------------------

### Basic Tabs Component Tag Usage

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Tabs/index.md

Illustrates the fundamental HTML-like tag for embedding the Tabs component.

```HTML
<b-tabs> | Tabs
```

--------------------------------

### Overlay Component Attributes

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Overlay/index.md

Properties and attributes available for configuring the Overlay component's behavior and appearance.

```APIDOC
open: boolean = false
  Description: Whether the overlay is visible.
zIndex: number = 999
  Description: Sets the z-index of the overlay.
noCloseWhenMaskClicked (no-close-when-mask-clicked): boolean = false
  Description: Prevents closing the overlay when the mask is clicked.
noCloseWhenEscPressed (no-close-when-esc-key-pressed): boolean = false
  Description: Prevents closing the overlay when the Esc key is pressed.
```

--------------------------------

### Stepper Component Methods

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Stepper/index.md

Describes the callable methods available on the Stepper component for programmatic control, allowing direct manipulation of its state.

```APIDOC
minus(): Makes the stepper decrease by the current step length once
plus(): Makes the stepper increase by the current step length once
```

--------------------------------

### Basic Checkbox Component Usage

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Checkbox/index.md

Demonstrates the basic HTML tag for rendering the Checkbox component. This snippet shows the fundamental structure for integrating the checkbox into a web page.

```HTML
<b-checkbox> | Checkbox
```

--------------------------------

### RadioGroup Component API Reference

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Radio/index.md

Details the attributes, events, slots, CSS parts, and style variables for the `RadioGroup` component.

```APIDOC
RadioGroup:
  Attributes & Properties:
    value:
      Description: 选中值 (Selected value)
      Type: string
      Default: -
    defaultValue (default-value):
      Description: 默认选中值 (Default selected value)
      Type: string
      Default: -
    disabled:
      Description: 是否禁用 (Whether disabled)
      Type: boolean
      Default: false
    vertical:
      Description: 是否垂直 (Whether vertical layout)
      Type: boolean
      Default: false
    name:
      Description: 用于表单提交的字段名 (Field name for form submission)
      Type: string
      Default: -
    required:
      Description: 是否必填 (Whether required)
      Type: boolean
      Default: false
    controlled:
      Description: 是否受控 (Whether controlled)
      Type: boolean
      Default: false
    readonly:
      Description: 是否只读 (Whether read-only)
      Type: boolean
      Default: false
  Events:
    change:
      Description: 选中值改变时触发 (Triggered when selected value changes)
      Event Detail: { value: string }
  Slots:
    (default):
      Description: 用于放置 Radio (Used to place Radio components)
  CSS Parts:
    base:
      Description: 包裹 RadioGroup 的容器 (Container wrapping RadioGroup)
  Style Variables:
    --banana-radio-group-vertical-gap:
      Description: 垂直布局时的 Radio 间距 (Radio spacing in vertical layout)
      Default: 8px
```

--------------------------------

### Marquee Component Basic Tag Usage

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Marquee/index.md

Demonstrates the basic HTML tag for integrating the Marquee component.

```HTML
<b-marquee> | Marquee
```

--------------------------------

### Basic Progress Component Tag Usage

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Progress/index.md

Demonstrates the fundamental HTML tag for embedding the Progress component into a web page.

```HTML
<b-progress> | Progress
```

--------------------------------

### Tooltip Component Attributes and Properties API

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Tooltip/index.md

Comprehensive API documentation for the configurable attributes and properties of the Tooltip component. Each entry details the property name, its purpose, data type, and default value, allowing for extensive customization of tooltip behavior and appearance.

```APIDOC
Property: content
  Description: Prompt content
  Type: boolean
  Default: ''
Property: placement
  Description: Pop-up position
  Type: Placement
  Default: 'top'
Property: disableAutoAdjustOverflow (disable-auto-adjust-overflow)
  Description: Disable automatic adjustment of pop-up position
  Type: boolean
  Default: false
Property: maxWidth (max-width)
  Description: Maximum width of the bubble
  Type: number | string
  Default: '300px'
Property: backgroundColor (background-color)
  Description: Background color of the bubble
  Type: string
  Default: 'rgba(46, 50 ,56, 1)'
Property: margin
  Description: Distance between the bubble and the trigger element
  Type: number
  Default: 8
Property: mouseEnterDelay (mouse-enter-delay)
  Description: Delay in milliseconds before showing after mouse entry
  Type: number
  Default: 100
Property: mouseLeaveDelay (mouse-leave-delay)
  Description: Delay in milliseconds before hiding after mouse exit
  Type: number
  Default: 100
Property: triggerAction (trigger-action)
  Description: Trigger behavior; 'none' keeps tooltip always visible
  Type: 'hover' | 'click' | 'none'
  Default: 'hover'
Property: noArrow (no-arrow)
  Description: Whether to hide the arrow
  Type: boolean
  Default: false
```

--------------------------------

### Countdown Component Format Options

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Countdown/index.md

Details the supported format characters for customizing the countdown display, including year, month, day, hour, minute, second, and millisecond. It also provides important tips on how the component handles zero-padding for time units.

```APIDOC
Format Options:
  Y: Year
  M: Month
  D: Day
  H: Hour
  m: Minute
  s: Second
  S: Millisecond

Tips:
  When the format length is greater than the remaining time, it will automatically pad with zeros.
  Example: HH:mm:ss for 1 minute remaining displays as 00:01:00.
  Example: mm:ss:SSS for 5 milliseconds remaining displays as 00:00:005.
```

--------------------------------

### Progress Component CSS Parts

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Progress/index.md

Lists the available CSS parts for the Progress component, enabling targeted styling of its internal elements via the ::part() pseudo-element.

```APIDOC
CSS Parts:
  base:
    description: Container wrapping the component
```

--------------------------------

### Overlay Component Style Variables

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Overlay/index.md

CSS custom properties (variables) for customizing the appearance of the Overlay component.

```APIDOC
--banana-overlay-background: rgba(0, 0, 0, 0.5)
  Description: The background color of the overlay.
```

--------------------------------

### Tooltip Component CSS Parts API

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Tooltip/index.md

API documentation for CSS parts that can be used to target and style specific internal elements of the Tooltip component. This allows for fine-grained control over the component's visual presentation using CSS.

```APIDOC
Part: base
  Description: Container wrapping the component
Part: drop
  Description: Container wrapping the bubble
Part: content
  Description: Bubble content area
Part: arrow
  Description: Bubble arrow area
```

--------------------------------

### Input Component CSS Parts Reference

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Input/index.md

Identifies the shadow DOM parts of the Input component that can be targeted for custom styling.

```APIDOC
CSS Parts:
  base:
    description: Container wrapping the component
  input:
    description: Native input tag part of the input box
```

--------------------------------

### Basic Divider Component Usage

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Divider/index.md

Demonstrates the fundamental way to use the `b-divider` component to create a horizontal divider.

```HTML/JSX
<b-divider> | Divider
```

--------------------------------

### Popup Component Methods

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Popup/index.md

Provides methods to programmatically control the visibility of the Popup component, allowing for imperative show and hide actions.

```APIDOC
Methods:
  show():
    description: Show popup
    parameters: -
  hide():
    description: Hide popup
    parameters: -
```

--------------------------------

### Stepper Component Tag

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Stepper/index.md

The basic HTML tag for integrating the Stepper component into a web application.

```HTML
<b-stepper> | Stepper
```

--------------------------------

### Overlay Component Events

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Overlay/index.md

Events emitted by the Overlay component, allowing for custom reactions to user interactions.

```APIDOC
close: CustomEvent
  Description: Callback triggered when the overlay is closed by clicking the mask or pressing the Escape key.
  Event Detail: -
```

--------------------------------

### Rating Component Attributes & Properties

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Rating/index.md

Defines the configurable properties and attributes for the Rating component, controlling its behavior and appearance. Includes type, description, and default values for each property.

```APIDOC
Rating Component Properties:
- value:
    Description: Current score
    Type: number
    Default: 0
- defaultValue (default-value):
    Description: Default value
    Type: number
    Default: 0
- halfAllowed (half-allowed):
    Description: Whether half stars are allowed
    Type: boolean
    Default: false
- readonly:
    Description: Whether read-only
    Type: boolean
    Default: false
- precision:
    Description: Precision mode, recommended for use with `readonly`
    Type: boolean
    Default: false
- character:
    Description: Custom symbol
    Type: string
    Default: -
- disabled:
    Description: Whether disabled
    Type: boolean
    Default: false
- name:
    Description: Field name for form submission
    Type: string
    Default: -
- required:
    Description: Whether required
    Type: boolean
    Default: false
- controlled:
    Description: Whether controlled
    Type: boolean
    Default: false
- form:
    Description: Can pass an id to specify the owning form
    Type: string
    Default: -
```

--------------------------------

### Countdown Component Attributes and Properties

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Countdown/index.md

Defines the configurable attributes and properties for the Countdown component. This includes `time` (number) for setting the countdown duration and `format` (string) for display customization, with a reference to day.js for formatting syntax.

```APIDOC
Attributes & Properties:
- time:
    Description: Countdown time
    Type: number
    Default: 0
- format:
    Description: Formats the countdown display, refer to day.js
    Type: string
    Default: HH:mm:ss
```

--------------------------------

### Carousel Component HTML Tag

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Carousel/index.md

Illustrates the basic HTML tag for integrating the Carousel component into a web page.

```HTML
<b-carousel>
```

--------------------------------

### Overlay Component Slots

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Overlay/index.md

Slots available for content projection within the Overlay component, allowing custom DOM structures to be displayed.

```APIDOC
(default): HTMLElement
  Description: Any DOM structure can be placed here, centered within the overlay.
```

--------------------------------

### Stepper Component CSS Custom Properties

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Stepper/index.md

Lists the CSS custom properties (variables) available for styling the Stepper component, providing a flexible way to customize its appearance via CSS.

```APIDOC
--banana-stepper-border-width: Component container border width (default: 1px)
--banana-stepper-border-color: Component container border color (default: #e5e5e4)
--banana-stepper-border-color-focus: Component border color when focused (default: #00897b)
--banana-stepper-btn-background-color: Component container background color (default: transparent)
--banana-stepper-content-color: Component value display font color (default: #212224)
--banana-stepper-font-size: Component value display font size (default: #212224)
--banana-stepper-font-family: Component value display font family (default: inherit)
--banana-stepper-content-weight: Component value display font weight (default: 500)
--banana-input-disabled-color: Component value font color when disabled (default: #212224)
```

--------------------------------

### Carousel Methods API

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Carousel/index.md

Describes the public methods available for programmatic control of the Carousel component for API reference.

```APIDOC
Carousel Methods:
- prev(): void
    Description: Switches to the previous carousel item.
- next(): void
    Description: Switches to the next carousel item.
- goto(index: number): void
    Description: Switches to the specified carousel item.
    Parameters:
        index: number - The zero-based index of the carousel item to switch to.
- calcHeight(): void
    Description: Recalculates and updates the height of the carousel.
```

--------------------------------

### Stepper Component CSS Parts

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Stepper/index.md

Identifies the shadow DOM parts that can be styled using the `::part()` CSS pseudo-element, enabling granular styling of internal component elements.

```APIDOC
base: Container wrapping the component
minus_btn: Decrease button area of the component
stepper_input: Value display area of the component
plus_btn: Increase button area of the component
```

--------------------------------

### Stepper Component Slots

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Stepper/index.md

Details the available slots for customizing the Stepper component's internal structure, allowing for flexible content injection.

```APIDOC
minus: Slot for the decrease button
plus: Slot for the increase button
```

--------------------------------

### Stepper Component Events

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Stepper/index.md

Lists the custom events emitted by the Stepper component, along with their descriptions and event detail, allowing external code to react to user interactions or state changes.

```APIDOC
focus: Triggers when the stepper gains focus
blur: Triggers when the stepper loses focus
change: Triggers when the stepper's content changes and it loses focus
```

--------------------------------

### Popup Component Tag Usage

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Popup/index.md

Basic representation of the b-popup component tag, indicating its general usage.

```HTML
<b-popup> | Popup
```

--------------------------------

### Tabs Component Slots

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Tabs/index.md

Details the available slots for customizing the content of the Tabs component.

```APIDOC
Slots:
- nav:
    Description: Content for the tabs navigation bar, accepts multiple `b-tab-item` components
- left-extra-render:
    Description: Renders extra elements on the left side of the tab header
- right-extra-render:
    Description: Renders extra elements on the right side of the tab header
- body:
    Description: Display content for the tabs component, accepts multiple `b-tab-panel` components bound to `b-tab-item`
```

--------------------------------

### CSS Styling for Demo Slide Component

Source: https://github.com/friedricenoodles/banana-ui/blob/master/public/Carousel/navigation.html

Defines the visual appearance and layout for a demo slide component. It sets a fixed height, uses flexbox for centering content, applies a linear gradient background, and specifies text color and font size.

```css
.demo-slide { height: 300px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom right, #5193e9, #0e61cd); color: #fff; font-size: 48px; }
```

--------------------------------

### Rating Component CSS Parts

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Rating/index.md

Defines the CSS parts available for styling specific internal elements of the Rating component, enabling granular visual customization.

```APIDOC
Rating Component CSS Parts:
- base:
    Description: Container wrapping the component
```

--------------------------------

### Marquee Component CSS Parts

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Marquee/index.md

Lists the shadow DOM parts available for styling the Marquee component using CSS.

```APIDOC
CSS Part: base
  Description: 包裹组件的容器 (Container wrapping the component)
CSS Part: content
  Description: 跑马灯的文字内容区域 (Marquee text content area)
```

--------------------------------

### Stepper Component Attributes & Properties

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Stepper/index.md

Defines the configurable properties and attributes for the Stepper component, including their types and default values, used for controlling its behavior and appearance.

```APIDOC
name: string (default: '') - Component name (for form linkage)
value: number (default: 0) - Stepper's current value
min: number - Minimum value
max: number - Maximum value
step: number (default: 1) - Step length for increment/decrement
disabled: boolean (default: false) - Whether the stepper is disabled
integer: boolean (default: false) - Whether the result must be an integer
defaultValue: number (default: 0) - Default value (for form reset)
required: boolean (default: false) - Whether required (for form linkage)
readonly: boolean (default: false) - Whether read-only (for form linkage)
controlled: boolean (default: false) - Whether controlled (user maintains value)
```

--------------------------------

### Textarea Component Attributes Reference

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Textarea/index.md

Detailed reference for the attributes and properties of a textarea-like UI component, including their types, descriptions, and default values. These properties control the behavior and appearance of the component.

```APIDOC
Component Properties:
  name:
    Description: The name of the textarea, submitted as a name/value pair with form data.
    Type: string
    Default: -
  value:
    Description: The current value of the textarea, submitted as a name/value pair with form data.
    Type: string
    Default: -
  size:
    Description: The textarea’s size.
    Type: 'small' | 'medium' | 'large'
    Default: 'medium'
  placeholder:
    Description: Placeholder text to show as a hint when the input is empty.
    Type: string
    Default: -
  rows:
    Description: The number of rows to display by default.
    Type: number
    Default: 4
  minlength:
    Description: The minimum length of input that will be considered valid.
    Type: number
    Default: -
  maxlength:
    Description: The maximum length of input that will be considered valid.
    Type: number
    Default: -
  autocapitalize:
    Description: Controls whether and how text input is automatically capitalized as it is entered by the user.
    Type: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'
    Default: 'off'
  autocorrect:
    Description: Indicates whether the browser’s autocorrect feature is on or off.
    Type: 'off' | 'on'
    Default: 'on'
  spellcheck:
    Description: Enables spell checking on the textarea.
    Type: boolean
    Default: true
  inputmode:
    Description: Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices.
    Type: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
    Default: 'text'
  autofocus:
    Description: Indicates that the input should receive focus on page load.
    Type: boolean
    Default: false
  disabled:
    Description: Disables the textarea.
    Type: boolean
    Default: false
  readonly:
    Description: Makes the textarea readonly.
    Type: boolean
    Default: false
  required:
    Description: Makes the textarea a required field.
    Type: boolean
    Default: false
```

--------------------------------

### Tooltip Component Slots API

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Tooltip/index.md

API documentation for the content projection slots available within the Tooltip component. These slots allow developers to inject custom content for the trigger element, the main bubble content area, and the arrow.

```APIDOC
Slot: (default)
  Description: Trigger for the text prompt
Slot: content
  Description: Bubble content area
Slot: arrow
  Description: Bubble arrow area
```

--------------------------------

### Tabs Component Attributes and Properties

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Tabs/index.md

Defines the configurable attributes and properties of the Tabs component, including their types and default values.

```APIDOC
Attributes & Properties:
- position:
    Description: Tab position, options `top`, `bottom`, `left`, `right`
    Type: string
    Default: top
- type:
    Description: Tab item type, options `line`, `block`
    Type: string
    Default: line
```

--------------------------------

### Tooltip Component CSS Variables API

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Tooltip/index.md

API documentation for custom CSS properties (variables) that can be used to customize the appearance of the Tooltip component. These variables allow for easy modification of padding, background color, text color, font size, border radius, and maximum width.

```APIDOC
Variable: --banana-tooltip-padding
  Description: Bubble padding
  Default: 4px 6px
Variable: --banana-tooltip-background-color
  Description: Bubble background color
  Default: rgba(46, 50, 56, 1)
Variable: --banana-tooltip-color
  Description: Bubble text color
  Default: #fff
Variable: --banana-tooltip-font-size
  Description: Bubble font size
  Default: 14px
Variable: --banana-tooltip-border-radius
  Description: Bubble border radius
  Default: 4px
Variable: --banana-tooltip-max-width
  Description: Bubble maximum width
  Default: 300px
```

--------------------------------

### APIDOC Message Static Methods

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Message/index.md

Describes the static methods available for displaying and managing global message prompts. Each method returns a unique ID that can be used to close the prompt programmatically.

```APIDOC
Static Methods:
- open(Config): Displays a prompt.
- info(ConfigWithoutType): Displays a normal prompt.
- success(ConfigWithoutType): Displays a success prompt.
- warning(ConfigWithoutType): Displays a warning prompt.
- error(ConfigWithoutType): Displays an error prompt.
- loading(ConfigWithoutType): Displays a loading prompt.
- closeMessage(id: number): Closes the specified prompt.
```

--------------------------------

### Carousel Attributes and Properties API

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Carousel/index.md

Lists all configurable attributes and properties of the Carousel component, including their types, default values, and descriptions for API reference.

```APIDOC
Carousel Attributes & Properties:
- loop: boolean (default: false)
    Description: Whether to loop the carousel.
- slidesPerView (slides-per-view): number (default: 1)
    Description: The number of carousel items displayed simultaneously.
- autoplay: boolean (default: false)
    Description: Whether to enable automatic playback.
- autoplayDelay (autoplay-delay): number (default: 3000)
    Description: The interval time for automatic playback, in milliseconds.
- noPauseOnMouseEnter (no-pause-on-mouse-enter): boolean (default: false)
    Description: By default, mouse entry pauses autoplay; setting this attribute cancels this behavior.
- disableDrag (disable-drag): boolean (default: false)
    Description: Whether to disable dragging functionality.
- navigation: boolean (default: false)
    Description: Whether to display previous and next navigation buttons.
- gap: number (default: 0)
    Description: The spacing between carousel items.
- disableFill (disable-fill): boolean (default: false)
    Description: By default, when the number of carousel items is less than slidesPerView, it automatically fills; setting this attribute cancels this behavior.
- autoHeight: boolean (default: false)
    Description: Whether to automatically adjust the height of the carousel.
- indicator: boolean (default: false)
    Description: Whether to display indicators (defaults to small dots).
- vertical: boolean (default: false)
    Description: Whether to display the carousel vertically.
```

--------------------------------

### Rating Component Events

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Rating/index.md

Lists the events emitted by the Rating component, allowing for interaction and state changes. Details include event name, description, and the structure of the event detail payload.

```APIDOC
Rating Component Events:
- change:
    Description: Triggered when value changes
    Event Detail: { value: number }
```

--------------------------------

### TypeScript Message Type Definitions

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Message/index.md

Defines the `MessageType`, `Config`, and `ConfigWithoutType` types used for configuring message prompts, including content, duration, and callback functions.

```TypeScript
export type MessageType = 'success' | 'warning' | 'info' | 'error' | 'loading';

export type Config = {
  type?: MessageType;
  content: string;
  duration?: number;
  onClose?: () => void;
};

export type ConfigWithoutType = Omit<Config, 'type'>;
```

--------------------------------

### CSS Styling for Demo Slide Component

Source: https://github.com/friedricenoodles/banana-ui/blob/master/public/Carousel/autoplay.html

This CSS snippet defines the visual and layout properties for a demo slide. It sets a fixed height, uses flexbox for centering content, applies a linear gradient background, and specifies text color and size. This ensures the slide is visually appealing and content is well-aligned.

```css
.demo-slide { height: 300px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom right, #5193e9, #0e61cd); color: #fff; font-size: 48px; }
```

--------------------------------

### Progress Component Attributes and Properties

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Progress/index.md

Defines the configurable attributes and properties of the Progress component, allowing control over its appearance and behavior, such as progress value, colors, and height.

```APIDOC
Attributes & Properties:
  percent:
    description: Progress value
    type: number
    default: -
  color:
    description: Progress bar color
    type: string
    default: -
  backgroundColor:
    description: Progress bar background color
    type: string
    default: -
  height:
    description: Progress bar height
    type: number
    default: -
```

--------------------------------

### TypeScript Definition for Tooltip Placement

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Tooltip/index.md

Defines the 'Placement' type, an enumeration of all possible positions for the tooltip relative to its trigger element, such as 'bottomLeft', 'top', or 'rightBottom'.

```TypeScript
export type Placement =
  | 'bottomLeft'
  | 'bottom'
  | 'bottomRight'
  | 'topLeft'
  | 'top'
  | 'topRight'
  | 'leftTop'
  | 'left'
  | 'leftBottom'
  | 'rightTop'
  | 'right'
  | 'rightBottom';
```

--------------------------------

### Countdown Component Style Variables

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Countdown/index.md

Lists the CSS custom properties (style variables) available for theme customization of the Countdown component. These variables allow for easy modification of visual aspects like font size, font weight, and font color.

```APIDOC
Style Variables:
- --banana-countdown-font-size:
    Description: Font size
    Default: 24px
- --banana-countdown-font-weight:
    Description: Font weight
    Default: 400
- --banana-countdown-color:
    Description: Font color
    Default: rgb(46, 50, 56)
```

--------------------------------

### Tabs Component CSS Parts

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Tabs/index.md

Identifies the CSS parts available for styling the internal elements of the Tabs component.

```APIDOC
CSS Parts:
- base:
    Description: Container wrapping the component
- header:
    Description: Header area of the component
```

--------------------------------

### APIDOC Message CSS Parts

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Message/index.md

Lists the CSS parts available for styling the message component, allowing for granular customization of its internal structure.

```APIDOC
CSS Parts:
- box: Container for all prompts.
- base: Container wrapping a single prompt.
- icon: Icon of the prompt.
- content: Content of the prompt.
```

--------------------------------

### Countdown Component Slots

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Countdown/index.md

Describes the available slots for customizing the Countdown component's internal structure. Specifically, the `separator` slot allows for custom content to be inserted between time units.

```APIDOC
Slots:
- separator:
    Description: Separator, can be used to customize the separator, e.g., <span slot="separator">:</span>
```

--------------------------------

### Rating Component Style Variables

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Rating/index.md

Customizable CSS variables for adjusting the visual appearance of the Rating component, such as symbol color, size, and spacing.

```APIDOC
Rating Component Style Variables:
- --banana-rating-symbol-color:
    Description: Color of the lit-up star (symbol)
    Default: rgb(253, 166, 51)
- --banana-rating-symbol-background-color:
    Description: Color of the unlit star (symbol)
    Default: rgb(179, 182, 183)
- --banana-rating-symbol-size:
    Description: Star (symbol) size
    Default: 24px
- --banana-rating-symbol-spacing:
    Description: Spacing between stars (symbols)
    Default: 8px
- --banana-rating-transition-duration:
    Description: Duration of the transition animation
    Default: 150ms
```

--------------------------------

### Countdown Component CSS Parts

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Countdown/index.md

Defines the CSS parts available for styling specific elements within the Countdown component. These parts provide hooks for developers to apply custom styles to the component's internal structure.

```APIDOC
CSS Parts:
- base:
    Description: Container wrapping the component
- separate-item:
    Description: A part of the countdown when the separate attribute is enabled
- separator:
    Description: Separator
```

--------------------------------

### Carousel CSS Parts API

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Carousel/index.md

Lists the CSS parts available for styling different internal elements of the Carousel component via its API.

```APIDOC
Carousel CSS Parts:
- base
    Description: The container wrapping the entire component.
- external-wrapper
    Description: The outer container for the carousel content.
- slides-wrapper
    Description: The container for the actual carousel slides.
- slide
    Description: The default slot for individual carousel content items.
- indicators
    Description: The container for the carousel indicators.
- indicator
    Description: An individual carousel indicator.
- indicator--active
    Description: An individual carousel indicator in its active state.
- navigation-buttons
    Description: The container for the navigation buttons.
- navigation-buttons--disabled
    Description: The navigation buttons in a disabled state.
- navigation-button--previous
    Description: The previous navigation button.
- navigation-button--next
    Description: The next navigation button.
```

--------------------------------

### Progress Component Style Variables

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Progress/index.md

Outlines the CSS custom properties (style variables) that can be used to customize the visual appearance of the Progress component, including its progress, colors, height, and border radius.

```APIDOC
Style Variables:
  --banana-progress-percent:
    description: Progress bar progress, used to control the length of the progress bar
    default: 0%
  --banana-progress-color:
    description: Progress bar color
    default: rgb(0, 90, 224)
  --banana-progress-background-color:
    description: Progress bar background color
    default: rgb(229, 231, 233)
  --banana-progress-height:
    description: Progress bar height
    default: 10px
  --banana-progress-border-radius:
    description: Progress bar border radius
    default: calc(var(--banana-progress-height, 10px) / 2)
```

--------------------------------

### Checkbox CSS Parts API Reference

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Checkbox/index.md

Identifies the CSS parts available for styling different sections of the Checkbox component. These parts allow for granular control over the component's visual presentation using CSS, enabling custom themes and styles.

```APIDOC
CSS Parts:
  base:
    Description: Container wrapping the component
  control:
    Description: Control part of the checkbox, i.e., the checkbox icon (the small square)
  label:
    Description: Label part of the checkbox, i.e., the text content
```

--------------------------------

### Style Demo Slides with Gradient Backgrounds and Auto-Height

Source: https://github.com/friedricenoodles/banana-ui/blob/master/public/Carousel/autoHeight.html

Defines base styles for `.demo-slide` elements within an `.autoheight` container, setting initial height, flexbox properties for centering content, and a linear gradient background. It also includes a rule for alternating slides (`:nth-child(2n)`) to have a different background gradient and a larger height, creating a dynamic visual effect.

```CSS
.autoheight .demo-slide { height: 300px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom right, #5193e9, #0e61cd); color: #fff; font-size: 48px; } .autoheight .demo-slide:nth-child(2n) { background: linear-gradient(to bottom right, #0e61cd, #5193e9); height: 500px; }
```

--------------------------------

### APIDOC Message Config Properties

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Message/index.md

Details the properties of the `Config` object used to customize message prompts, including type, content, duration, and a callback for when the message closes.

```APIDOC
Config Properties:
- type: MessageType (default: 'info') - Type of the prompt.
- content: string - Content of the prompt.
- duration: number (default: 3) - Auto-close delay in seconds. Set to 0 for no auto-close.
- onClose: () => void - Callback function triggered when the prompt closes.
```

--------------------------------

### Styling for Demo Slide Component (CSS)

Source: https://github.com/friedricenoodles/banana-ui/blob/master/public/Carousel/slidesPerView.html

This CSS snippet defines the visual and layout properties for a demo slide element. It sets a fixed height, uses flexbox for centering content, applies a linear gradient background, and styles the text color and size to ensure a consistent and appealing look for demonstration purposes.

```css
.demo-slide { height: 300px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom right, #5193e9, #0e61cd); color: #fff; font-size: 48px; }
```

--------------------------------

### Popup Component Events

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Popup/index.md

Lists events emitted by the Popup component, allowing for custom reactions to user interactions such as clicking the overlay or pressing the Escape key.

```APIDOC
Events:
  close:
    description: Callback when overlay is clicked or Escape key is pressed
    detail: -
```

--------------------------------

### Rating Component Tag Usage

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Rating/index.md

Basic representation of the Rating component tag, indicating its element name.

```HTML/JSX
<b-rating> | Rating
```

--------------------------------

### Marquee Component Attributes and Properties

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Marquee/index.md

Defines the configurable attributes and properties for the Marquee component, including content, color, duration, and behavior flags.

```APIDOC
Attribute: content
  Description: 跑马灯的文本内容 (Marquee text content)
  Type: string
  Default: ''
Attribute: color
  Description: 跑马灯的文本颜色 (Marquee text color)
  Type: string
  Default: ''
Attribute: duration
  Description: 滚动时长（单位：s） (Scroll duration in seconds)
  Type: number
  Default: 20
Attribute: pauseWhenHover (pause-when-hover)
  Description: 鼠标悬停时是否暂停 (Whether to pause on mouse hover)
  Type: boolean
  Default: false
Attribute: fixed
  Description: 短文案固定，传入 `fixed` 属性后，如果文案宽度小于容器宽度，则文案不会滚动。(If the text content is shorter than the container width, it will not scroll when `fixed` is true.)
  Type: boolean
  Default: false
Attribute: vertical
  Description: 垂直滚动 (Vertical scrolling)
  Type: boolean
  Default: false
```

--------------------------------

### CSS Layout for Banana UI Components

Source: https://github.com/friedricenoodles/banana-ui/blob/master/public/Tooltip/placement.html

Defines the styling for a '.container' element to be an inline flex column with a gap, and sets a custom property for tooltip max-width. It also styles '.placement-row' for flex display and sets a fixed width for 'b-button' elements within these rows.

```CSS
.container { display: inline-flex; flex-direction: column; gap: 8px; --banana-tooltip-max-width: 80px; } .placement-row { display: flex; gap: 8px; } .placement-row b-button { width: 60px; }
```

--------------------------------

### Carousel Slots API

Source: https://github.com/friedricenoodles/banana-ui/blob/master/docs/example/Carousel/index.md

Explains the available slots for projecting custom content into the Carousel component via its API.

```APIDOC
Carousel Slots:
- (default)
    Description: The main content area for carousel items.
- prev-button
    Description: Slot for custom content for the previous navigation button.
- next-button
    Description: Slot for custom content for the next navigation button.
```