fix(ui)

front/src/components/ui/Toggle.vue

@@ -17,7 +17,7 @@ const diameter = big? '28px' : '20px'
     :checked = "isOn || undefined"
   >
     <input type="checkbox" v-model="isOn"
-      style="visibility: hidden; /* Hide even before stylesheet is loaded */"
+      style="opacity: 0; /* Hide even before stylesheet is loaded */"
     />
     <span v-if="label">{{ label }}</span>
 </label>
@@ -48,7 +48,7 @@ const diameter = big? '28px' : '20px'
     }
   }
 
-  &:hover {
+  &:hover, &:has(:focus-visible) {
     --void-color: var(--void-off-hover-background-color);
     --pin-color: var(--void-off-hover-pin-color);
     &[checked] {
@@ -80,9 +80,5 @@ const diameter = big? '28px' : '20px'
   > span {
     padding-left: calc(var(--diameter) + 8px);
   }
-
-  > input {
-    visibility: hidden;
-  }
 }
 </style>

front/ui-docs/components/ui/layout.md

@@ -71,7 +71,7 @@ const noGap = ref(true);
 ```
 
 <div class="preview" style="width:0">
-  <Toggle v-model="noGap" /> {{ noGap ? 'no-gap' : '-' }}
+  <Toggle v-model="noGap" label="no-gap" />
 
 ---
 
@@ -106,7 +106,7 @@ const isGrowing = ref(true);
 <template>
   <Toggle v-model="isGrowing" />
 
-  <Layout stack style="height:20em;">
+  <Layout stack style="height:25em;">
     <Alert red />
     <Alert purple />
     <Spacer :grow="isGrowing || undefined" />
@@ -116,11 +116,11 @@ const isGrowing = ref(true);
 ```
 
 <div class="preview">
-<Toggle v-model="isGrowing" /> {{ isGrowing ? 'grow' : '-' }}
+<Toggle v-model="isGrowing" label="grow"/>
 
 ---
 
-<Layout stack style="height:20em">
+<Layout stack style="height:25em">
   <Alert red />
   <Alert purple />
   <Spacer :grow="isGrowing || undefined" />
@@ -140,7 +140,7 @@ Note that you can set the minimum space occupied by the `Spacer` with its `size`
 <template>
   <Toggle v-model="isGrowing" />
 
-  <Layout stack style="height:25em;">
+  <Layout stack style="height:35em;">
     <Alert blue />
     <Spacer :size="-32" :grow="isGrowing || undefined" />
     <Alert green />
@@ -156,7 +156,7 @@ Note that you can set the minimum space occupied by the `Spacer` with its `size`
 
 ---
 
-<Layout stack style="height:25em;">
+<Layout stack style="height:35em;">
     <Alert blue />
     <Spacer :size="-32" :grow="isGrowing || undefined" />
     <Alert green />