Fixed ToggleButton

components/lib/themes/primeone/base/togglebutton/index.js

@@ -2,50 +2,31 @@ export default {
     css: ({ dt }) => `
 .p-togglebutton {
     display: inline-flex;
-    user-select: none;
-    vertical-align: bottom;
-    border: 1px solid transparent;
-    background: ${dt('togglebutton.background')};
-    border-radius: ${dt('rounded.base')};
-    outline-color: transparent;
-    position: relative;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-}
-
-.p-togglebutton-input {
     cursor: pointer;
-    appearance: none;
+    user-select: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-    z-index: 1;
-    outline: 0 none;
-    border: 1px solid transparent;
-    border-radius: ${dt('rounded.base')};;
-}
-
-.p-togglebutton .p-button {
-    flex: 1 1 auto;
-    background: transparent;
-    border: 0 none;
-    color: ${dt('togglebutton.item.color')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-    outline-color: transparent;
-    padding: 0.5rem 1rem;
-    display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: ${dt('rounded.base')};
+    overflow: hidden;
-    gap: 0.5rem;
     position: relative;
+    color: ${dt('togglebutton.color')};
+    background: ${dt('togglebutton.background')};
+    border: 1px solid ${dt('togglebutton.border.color')};
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    border-radius: ${dt('rounded.base')};
+    outline-color: transparent;
+    gap: 0.5rem;
+    font-weight: 500;
 }
 
-.p-togglebutton .p-button::before {
+.p-togglebutton-label,
+.p-togglebutton-icon {
+    position: relative;
+    transition: none;
+}
+
+.p-togglebutton::before {
     content: "";
     background: transparent;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@@ -57,41 +38,20 @@ export default {
     border-radius: ${dt('rounded.sm')};
 }
 
-.p-togglebutton .p-button .p-button-label,
+.p-togglebutton.p-highlight::before {
-.p-togglebutton .p-button .p-button-icon {
+    background: ${dt('togglebutton.checked.background')};
-    position: relative;
-    transition: none;
-}
-
-.p-togglebutton .p-button .p-button-icon-left,
-.p-togglebutton .p-button .p-button-icon-right {
-    color: ${dt('togglebutton.item.icon.color')};
-}
-
-.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
-    color: ${dt('togglebutton.item.hover.color')};
-}
-
-.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
-.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
-    color: ${dt('togglebutton.item.icon.hover.color')};
-}
-
-.p-togglebutton.p-highlight .p-button {
-    color: ${dt('togglebutton.item.checked.color')};
-}
-
-.p-togglebutton.p-highlight .p-button::before {
-    background: ${dt('togglebutton.item.checked.background')};
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
 }
 
-.p-togglebutton.p-highlight .p-button .p-button-icon-left,
+.p-togglebutton:not(:disabled):not(.p-highlight):hover {
-.p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: ${dt('togglebutton.hover.color')};
-    color: ${dt('togglebutton.item.icon.checked.color')};
 }
 
-.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) {
+.p-togglebutton.p-highlight {
+    color: ${dt('togglebutton.checked.color')};
+}
+
+.p-togglebutton:focus-visible {
     outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};
 }
@@ -100,17 +60,26 @@ export default {
     border-color: ${dt('togglebutton.invalid.border.color')};
 }
 
-.p-togglebutton.p-disabled {
+.p-togglebutton:disabled {
     opacity: 1;
     background: ${dt('togglebutton.disabled.background')};
+    color: ${dt('togglebutton.disabled.color')};
 }
 
-.p-togglebutton.p-disabled .p-button {
+.p-togglebutton-icon {
-    color: ${dt('togglebutton.item.disabled.color')};
+    color: ${dt('togglebutton.icon.color')};
 }
 
-.p-togglebutton.p-disabled .p-button .p-button-icon {
+.p-togglebutton:not(:disabled):not(.p-highlight):hover .p-togglebutton-icon {
-    color: ${dt('togglebutton.item.icon.disabled.color')};
+    color: ${dt('togglebutton.icon.hover.color')};
+}
+
+.p-togglebutton.p-highlight .p-togglebutton-icon {
+    color: ${dt('togglebutton.icon.checked.color')};
+}
+
+.p-togglebutton:disabled .p-togglebutton-icon {
+    color: ${dt('togglebutton.icon.disabled.color')};
 }
 `
 };

components/lib/themes/primeone/presets/aura/togglebutton/index.js

@@ -3,17 +3,16 @@ export default {
         light: {
             root: {
                 background: '{surface.100}',
-                disabledBackground: '{form.field.disabled.background}',
-                invalidBorderColor: '{form.field.invalid.border.color}'
-            },
-            item: {
                 checkedBackground: '{surface.0}',
+                disabledBackground: '{form.field.disabled.background}',
+                borderColor: '{surface.100}',
+                invalidBorderColor: '{form.field.invalid.border.color}',
                 color: '{surface.500}',
                 hoverColor: '{surface.700}',
                 checkedColor: '{surface.900}',
                 disabledColor: '{form.field.disabled.color}'
             },
-            itemIcon: {
+            icon: {
                 color: '{surface.500}',
                 hoverColor: '{surface.700}',
                 checkedColor: '{surface.900}',
@@ -23,17 +22,16 @@ export default {
         dark: {
             root: {
                 background: '{surface.950}',
-                disabledBackground: '{form.field.disabled.background}',
-                invalidBorderColor: '{form.field.invalid.border.color}'
-            },
-            item: {
                 checkedBackground: '{surface.800}',
+                disabledBackground: '{form.field.disabled.background}',
+                borderColor: '{surface.950}',
+                invalidBorderColor: '{form.field.invalid.border.color}',
                 color: '{surface.400}',
                 hoverColor: '{surface.300}',
                 checkedColor: '{surface.0}',
                 disabledColor: '{form.field.disabled.color}'
             },
-            itemIcon: {
+            icon: {
                 color: '{surface.400}',
                 hoverColor: '{surface.300}',
                 checkedColor: '{surface.0}',

components/lib/togglebutton/ToggleButton.vue

@@ -1,12 +1,10 @@
 <template>
-    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
+    <button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
-        <button v-ripple type="button" :class="cx('button')" :tabindex="tabindex" :aria-pressed="modelValue" :aria-disabled="disabled" @click="onChange" v-bind="getPTOptions('button')">
+        <slot name="icon" :value="modelValue" :class="cx('icon')">
-            <slot name="icon" :value="modelValue" :class="cx('icon')">
+            <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
-                <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
+        </slot>
-            </slot>
+        <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
-            <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
+    </button>
-        </button>
-    </div>
 </template>
 
 <script>

components/lib/togglebutton/style/ToggleButtonStyle.js

@@ -4,12 +4,10 @@ const classes = {
     root: ({ instance, props }) => [
         'p-togglebutton p-component',
         {
-            'p-disabled': props.disabled,
             'p-highlight': instance.active,
             'p-invalid': props.invalid
         }
     ],
-    button: 'p-togglebutton-button',
     icon: ({ instance, props }) => [
         'p-togglebutton-icon',
         {