CHANGED: Some stuff changed in switch, Radio now is SVG

src/primitive-components/icon-button/icon-button.tsx

@@ -3,14 +3,7 @@
 import { Icon } from '../components';
 import { ButtonLayout } from '../button-layout/button-layout';
 import { IconButtonProps, StateToggleIconType } from './icon-button.types';
-import {
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-    forwardRef,
-    MouseEventHandler,
-    useCallback,
-    useImperativeHandle,
-    useRef,
-    useState,
-} from 'react';
 
 /**
  * Icon button-layout component

src/primitive-components/radio/radio.tsx

@@ -18,12 +18,24 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
             events = useRippleEffect(ripplesRef, setIsActive);
 
         const classes =
-            `m3 m3-radio-label ${isActive === true ? 'visible' : ''}`.trimEnd();
+            `m3 m3-radio ${isActive === true ? 'visible' : ''}`.trimEnd();
 
         return (
-            <label {...events} className={classes}>
+            <div {...events} className={classes}>
                 <CheckBoxLayout {...props} ref={ref} type={'radio'} />
                 <span className={'m3 m3-radio-state-layer'} />
+                <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
+                    <circle
+                        className={'m3-radio-outline'}
+                        cx={'50%'}
+                        cy={'50%'}
+                    />
+                    <circle
+                        className={'m3-radio-state'}
+                        cx={'50%'}
+                        cy={'50%'}
+                    />
+                </svg>
                 <RippleArea
                     callback={setIsActive}
                     central={centralRipple}
@@ -31,7 +43,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
                     ref={ripplesRef}
                 />
                 {props.children}
-            </label>
+            </div>
         );
     },
 );

src/primitive-components/switch/switch.tsx

@@ -11,7 +11,7 @@ import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
 
 export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
     ({ icon, disabled, selected = false, ...props }, ref) => (
-        <div className={'m3 m3-switch-exp'}>
+        <div className={'m3 m3-switch'}>
             <CheckBoxLayout
                 {...props}
                 className={`m3 ${props.className ?? ''}`.trimEnd()}

src/styles/radio.sass

@@ -1,52 +1,39 @@
 @import "mixins/m3-mixins"
 
-label.m3.m3-radio-label
+div.m3.m3-radio
-    @include m3-label-mixin
-    & > span.m3.m3-radio-state-layer
-        @include m3-state-layer-mixin
-
-input[type="radio"].m3.m3-radio
-    appearance: none
-    display: flex
-    align-items: center
-    justify-content: center
-    z-index: 10
     width: 20px
-    margin: 0
+    height: 20px
-    aspect-ratio: inherit
+    align-items: center
-    border-radius: 50%
+    display: inline-flex
-    border: 2px solid var(--md-sys-color-on-surface-variant)
+    justify-content: center
-    transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
-    &::after
+    & > span.m3-checkbox-ripple-layer, span.m3.m3-radio-state-layer
-        content: ""
+        z-index: 5
-        width: 10px
+
+    & > span.m3.m3-radio-state-layer
+        width: 40px
         aspect-ratio: 1
         border-radius: 50%
+        position: absolute
+        pointer-events: none
+        transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
-    &:disabled
+    & > input[type="radio"].m3.m3-radio
-        border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
+        margin: 0
-
+        width: 20px
-    &:checked
+        height: 20px
-        border: 2px solid var(--md-sys-color-primary)
+        aspect-ratio: 1
-
+        cursor: pointer
-    &:checked::after
+        appearance: none
-        background-color: var(--md-sys-color-primary)
+        position: absolute
-
-    &:checked:disabled
-        border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
-
-    &:checked:disabled::after
-        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
 
         &:not(:disabled)
-
             &:checked:hover + span.m3.m3-radio-state-layer
                 background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
 
             &:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
                 background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
-            & + span.m3-ripple-domain > .m3.ripple
+                & ~ span.m3-ripple-domain > .m3.ripple
                     background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
 
             &:hover
@@ -55,5 +42,52 @@ input[type="radio"].m3.m3-radio
 
             &:active + span.m3.m3-radio-state-layer
                 background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
-            & + span.m3-ripple-domain > .m3.ripple
+                & ~ span.m3-ripple-domain > .m3.ripple
                     background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
+
+        &:disabled
+            &:is(:not(:checked), &:checked) ~ svg
+                & > circle.m3-radio-outline
+                    stroke-opacity: 38%
+                    stroke: var(--md-sys-color-on-surface)
+
+            &:checked ~ svg > circle.m3-radio-state
+                fill-opacity: 38%
+                fill: var(--md-sys-color-on-surface)
+
+        &:not(:checked) ~ svg
+            & > circle.m3-radio-outline
+                stroke: var(--md-sys-color-on-surface-variant)
+
+            & > circle.m3-radio-state
+                fill-opacity: 0
+                fill: var(--md-sys-color-primary)
+
+        &:checked ~ svg
+            & > circle.m3-radio-outline
+                stroke: var(--md-sys-color-primary)
+
+            & > circle.m3-radio-state
+                fill-opacity: 1
+                fill: var(--md-sys-color-primary)
+
+    svg
+        margin: 0
+        width: 20px
+        z-index: 10
+        border-radius: 50%
+        pointer-events: none
+        aspect-ratio: inherit
+
+        & > circle
+            transition: fill, stroke, .2s cubic-bezier(0.2, 0, 0, 1)
+
+            &.m3-radio-outline
+                r: 9px
+                fill: black
+                fill-opacity: 0
+                stroke-width: 2px
+                stroke: var(--md-sys-color-on-surface-variant)
+
+            &.m3-radio-state
+                r: 5px

src/styles/swtich.css

@@ -1,4 +1,4 @@
-div.m3.m3-switch-exp {
+div.m3.m3-switch {
   margin: 4px;
   box-sizing: content-box;
   display: flex;
@@ -7,34 +7,34 @@ div.m3.m3-switch-exp {
   width: 52px;
   height: 32px;
 }
-div.m3.m3-switch-exp > svg {
+div.m3.m3-switch > svg {
   overflow: visible;
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   width: 52px;
   height: 32px;
 }
-div.m3.m3-switch-exp > svg > g {
+div.m3.m3-switch > svg > g {
   transform: translate(11.5%, 81%);
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-div.m3.m3-switch-exp > svg > g > text {
+div.m3.m3-switch > svg > g > text {
   font-family: Material-Symbols-Outlined-Regular;
   font-size: 20px;
 }
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer,
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer,
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   cy: 50%;
   cx: 16px;
 }
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
   r: 20px;
   fill-opacity: 0;
 }
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
   r: 8px;
 }
-div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > svg > rect.m3.m3-switch-track {
   transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   stroke-width: 2px;
   border-radius: 16px;
@@ -42,7 +42,7 @@ div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
   width: 50px;
   height: 30px;
 }
-div.m3.m3-switch-exp > input.m3 {
+div.m3.m3-switch > input.m3 {
   cursor: pointer;
   appearance: none;
   opacity: 0 !important;
@@ -51,124 +51,124 @@ div.m3.m3-switch-exp > input.m3 {
   height: 32px;
   position: absolute;
 }
-div.m3.m3-switch-exp > input.m3:disabled {
+div.m3.m3-switch > input.m3:disabled {
   cursor: not-allowed;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:not(:checked, :disabled)
   + svg
   > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-outline);
 }
-div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
+div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
   transform: translate(50%, 81%);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:checked:not(:disabled)
   + svg
   > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-on-primary);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:not(:disabled)
   + svg
   > g
   > text.m3.m3-icon-unchecked {
   fill: var(--md-sys-color-on-primary);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:not(:disabled)
   + svg
   > g
   > text.m3.m3-icon-checked {
   fill: var(--md-sys-color-on-primary-container);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:checked:disabled
   + svg
   > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-surface);
 }
-div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3.m3-switch-handler,
+div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler,
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3
   + svg:has(text.m3.m3-icon-unchecked)
   > circle.m3.m3-switch-handler {
   r: 12px;
 }
-div.m3.m3-switch-exp > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
+div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
   opacity: 0;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:checked
   + svg
   > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
   cx: calc(100% - 16px);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:not(:checked)
   + svg
   > g
   > text.m3.m3-icon-checked {
   opacity: 0;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:is(
-    div.m3.m3-switch-exp > input.m3:checked,
+    div.m3.m3-switch > input.m3:checked,
-    div.m3.m3-switch-exp > input.m3
+    div.m3.m3-switch > input.m3
   ):not(:disabled):active
   + svg
   > circle.m3.m3-switch-handler {
   r: 14px;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:not(:checked):disabled
   + svg
   > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-on-surface);
   fill-opacity: 38%;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:hover:not(:disabled):checked
   + svg
   > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-primary-container);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:hover:not(:disabled):checked
   + svg
   > circle.m3.m3-switch-handler-state-layer {
   fill: var(--md-sys-color-primary);
   fill-opacity: 8%;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:hover:not(:disabled):not(:checked)
   + svg
   > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-on-surface-variant);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:hover:not(:disabled):not(:checked)
   + svg
   > circle.m3.m3-switch-handler-state-layer {
   fill: var(--md-sys-color-on-surface);
   fill-opacity: 8%;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:active:not(:disabled):checked
   + svg
   > circle.m3.m3-switch-handler-state-layer {
   fill: var(--md-sys-color-primary);
   fill-opacity: 12%;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:active:not(:disabled):not(:checked)
   + svg
   > circle.m3.m3-switch-handler-state-layer {
   fill: var(--md-sys-color-on-surface);
   fill-opacity: 12%;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:is(:checked, :checked:disabled)
   + svg
   > rect.m3.m3-switch-track {
@@ -177,32 +177,32 @@ div.m3.m3-switch-exp
   height: 32px;
   stroke-width: 0;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:is(
-    div.m3.m3-switch-exp > input.m3:not(:checked),
+    div.m3.m3-switch > input.m3:not(:checked),
-    div.m3.m3-switch-exp > input.m3:not(:checked):disabled
+    div.m3.m3-switch > input.m3:not(:checked):disabled
   )
   + svg
   > rect.m3.m3-switch-track {
   x: 1px;
   y: 1px;
 }
-div.m3.m3-switch-exp > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
   stroke: var(--md-sys-color-outline);
   fill: var(--md-sys-color-surface-container-highest);
 }
-div.m3.m3-switch-exp > input.m3:checked + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
   stroke: var(--md-sys-color-primary);
   fill: var(--md-sys-color-primary);
 }
-div.m3.m3-switch-exp > input.m3:disabled + svg > g > text.m3 {
+div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
   fill: color-mix(
     in srgb,
     var(--md-sys-color-surface-container-highest) 38%,
     transparent
   );
 }
-div.m3.m3-switch-exp > input.m3:disabled + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track {
   stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
   fill: color-mix(
     in srgb,
@@ -210,11 +210,11 @@ div.m3.m3-switch-exp > input.m3:disabled + svg > rect.m3.m3-switch-track {
     transparent
   );
 }
-div.m3.m3-switch-exp > input.m3:checked:disabled + svg > g > text.m3 {
+div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
   transform: translateX(38.5%);
   fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:checked:disabled
   + svg
   > rect.m3.m3-switch-track {

src/styles/swtich.sass

@@ -1,4 +1,4 @@
-div.m3.m3-switch-exp
+div.m3.m3-switch
     margin: 4px
     box-sizing: content-box
     display: flex