RadioButton, Rating, SelectButton, Slider unstyled demo updates

doc/selectbutton/theming/StyledDoc.vue

@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText id="style" label="Style" v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-select-button</td>
+                    <td>SelectButton element</td>
+                </tr>
+                <tr>
+                    <td>p-button</td>
+                    <td>Button element</td>
+                </tr>
+                <tr>
+                    <td>p-button-label</td>
+                    <td>Label element of the button</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

doc/selectbutton/theming/UnstyledDoc.vue

@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 'Off',
+            options: ['Off', 'On'],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('off');
+const options = ref(['Off', 'On']);
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/selectbutton/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>SelectButton Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>